# watchelement

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

Latest version **0.1.3** (published 2018-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install watchelement
pnpm add watchelement
yarn add watchelement
bun add watchelement
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-04-17 |
| First published | 2018-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 226.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nicholas Smith |
| Maintainers | fuhton |

## Links

- npm: https://www.npmjs.com/package/watchelement
- Repository: https://github.com/fuhton/watchElement
- Homepage: https://github.com/fuhton/watchElement#readme
- Issues: https://github.com/fuhton/watchElement/issues
- npm.io page: https://npm.io/package/watchelement

## Recent versions

- 0.1.3 (latest) — 2018-04-17
- 0.1.2 — 2018-04-17
- 0.1.0 — 2018-04-17

## README

<p align="center">
  ⌚️ 🗻 watchelement
  <br/>
  <br/>
  <a href="https://www.npmjs.org/package/watchelement">
    <img src="https://img.shields.io/npm/v/watchelement.svg?style=flat" alt="npm">
  </a>
  <a href="https://travis-ci.org/fuhton/watchElement">
    <img src="https://travis-ci.org/fuhton/watchElement.svg?branch=master" alt="travis">
  </a>
</p>

# 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](#install)
- [Support](#support)
- [Usage](#usage)
- [Examples](#examples)
- [API](#api)
- [Roadmap](#roadmap)
- [License](#license)

### Install

This project uses [node](http://nodejs.org) and [npm](https://npmjs.com).

```sh
npm install --save watchelement
```

Then with a module bundler like [webpack](https://webpack.js.org) or another bundling solution:

```js
import WatchElementProvider from 'watchelement/provider';
```

### Support

watchElement relys on [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/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

```js
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
- [X] Allow definition of root mutation element


### Reporting Issues

Found a problem? Want a new feature? Open a [clear and descriptive issue](../../issues/new).

### License

MIT © [Nicholas Smith](https://fuhton.com)

---
_Source: https://npm.io/package/watchelement · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._