# react-intersection-visible-hook

> react intersection visible hook for react

Latest version **1.4.2** (published 2018-10-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-intersection-visible-hook
pnpm add react-intersection-visible-hook
yarn add react-intersection-visible-hook
bun add react-intersection-visible-hook
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.2 |
| Published | 2018-10-30 |
| First published | 2018-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 48 |
| Author | Avraam Mavridis |
| Maintainers | avrmav |
| Keywords | react, hook, visible, intersection, dom, show, hide |

## Links

- npm: https://www.npmjs.com/package/react-intersection-visible-hook
- Repository: https://github.com/AvraamMavridis/react-intersection-visible-hook
- Issues: https://github.com/AvraamMavridis/react-intersection-visible-hook/issues
- npm.io page: https://npm.io/package/react-intersection-visible-hook

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.7.0-alpha.0
- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.5.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.4.2 (latest) — 2018-10-30
- 1.4.1 — 2018-10-30
- 1.4.0 — 2018-10-30
- 1.2.3 — 2018-10-26
- 1.2.2 — 2018-10-26
- 1.2.1 — 2018-10-26
- 1.2.0 — 2018-10-26
- 1.1.0 — 2018-10-26
- 0.0.1 — 2018-10-26

## README

# react-intersection-visible-hook

React hook to track the visibility of a functional component based on IntersectionVisible Observer.

In the following example we changed the background color of the body depending on the visibility of the blue box.

<img src="https://github.com/AvraamMavridis/react-intersection-visible-hook/blob/master/demo_gif.gif?raw=true" />

*Demo and tests are coming*

```
import useVisibility from 'react-intersection-visible-hook'
```

### How to use it

```js
function App() {
  const nodeRef = useRef(null);
  const visibility = useVisibility(nodeRef);

  return (
    <div className="App" ref={nodeRef}>
      <h1>Hello</h1>
    </div>
  );
}
```

##### With options

```js
const options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

function App() {
  const nodeRef = useRef(null);
  const visibility = useVisibility(nodeRef, options);

  return (
    <div className="App" ref={nodeRef}>
      <h1>Hello</h1>
      <h2>{visibility.isIntersecting ?  'Component is visible' : 'Component is hidden' }</h2>
    </div>
  );
}
```

The `visibility` object contains

```
boundingClientRect
intersectionRatio
intersectionRect
isIntersecting
rootBounds
target
time
```


### Contribute

Any pull-request is more than welcome :boom: :smile:

### License

MIT

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