# intersection-observer-hooks

> `import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"`

Latest version **1.1.0** (published 2019-09-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install intersection-observer-hooks
pnpm add intersection-observer-hooks
yarn add intersection-observer-hooks
bun add intersection-observer-hooks
```

## 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.1.0 |
| Published | 2019-09-12 |
| First published | 2019-09-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | zackljackson |

## Links

- npm: https://www.npmjs.com/package/intersection-observer-hooks
- Repository: https://github.com/ScriptedAlchemy/intersection-observer-hooks
- Homepage: https://github.com/ScriptedAlchemy/intersection-observer-hooks#readme
- Issues: https://github.com/ScriptedAlchemy/intersection-observer-hooks/issues
- npm.io page: https://npm.io/package/intersection-observer-hooks

## Dependencies (3)

- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.6.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.0.0
- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.7.0

## Recent versions

- 1.1.0 (latest) — 2019-09-12
- 1.0.0 — 2019-09-12

## README

`import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"`

API:

`useIntersectionObserver(callback, nodeRef, options = {}) `

`callback`: returns a bool of when isIntersecting

`options`: Object <br>
`options.once`: observe once then unobserve
`options.rootMargin`: the root margin for intersection observer
`options.rootRef`: React ref

Example use:

```js
import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"

  useIntersectionObserver((visible) => {
    // then we are not at SSR
    ssr.current = false;
    setOffscreen(!visible);
    onVisibilitySet(visible);
  }, containerRef || ref, {
    once: true,
    rootMargin: '30%',
    rootRef,
  });


  useEffect(() => {
    if (eager) {
      return addTrackedLoader(
        () => {
          setOffscreen(false);
          onVisibilitySet(true);
        },
        containerRef || ref,
      );
    }

    return () => null;
  }, [eager]);
```

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