⌚️ 🗻 watchelement

watchElement

A React HOC for managing component visibility by watching external DOM elements

• Small ~1kb (~650b + ~350b) footprint
• Watching Keeps watch of the DOM and will toggle based on
• Convenient Provider and HOC work behind the scenes

Table of Contents

• Install
• Support
• Usage
• Examples
• API
• Roadmap
• License

Install

This project uses node and npm.

npm install --save watchelement

Then with a module bundler like webpack or another bundling solution:

import WatchElementProvider from 'watchelement/provider';

Support

watchElement relys on MutationObserver to keep track of the elements within the DOM. All modern browsers are supported by this spec, but developers are encouraged to review the browser support list before implementing this library into their project.

Usage

import WatchElementProvider from 'watchelement/provider';
import WatchElementHOC from 'watchelement/hoc';

const Check = () => <div>Display me!</div>;
const WrappedCheck = WatchElement('.check')(Check);

const App = () => (
  <div>
    <WrappedCheck />
  </div>
);

ReactDOM.render(
  <WatchElementProvider>
    <App />
  </WatchElementProvider>,
  document.getElementById('root')
);

Examples

Interactive example on CodeSandbox.io - https://codesandbox.io/s/4xyzq48jy7

API

Soon...

Roadmap

• Create API documentation
• Allow definition of root mutation element

Reporting Issues

Found a problem? Want a new feature? Open a clear and descriptive issue.

License

MIT © Nicholas Smith