# viewport-observer

> React Component that observe changes in the intersection of a target element with viewport using IntersectionObserver

Latest version **2.3.0** (published 2017-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install viewport-observer
pnpm add viewport-observer
yarn add viewport-observer
bun add viewport-observer
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2017-12-11 |
| First published | 2017-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 67 |
| Author | openfresh |
| Maintainers | sutiwo, masup9, tommy-san, stormcat24, korilakkuma, pocotan001, 1000ch |
| Keywords | react, viewport, intersection |

## Links

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.3.0 (latest) — 2017-12-11
- 2.2.2 — 2017-11-21
- 2.2.1 — 2017-11-12
- 2.2.0 — 2017-11-06
- 2.1.0 — 2017-10-13
- 2.0.0 — 2017-10-11
- 1.1.0 — 2017-10-04
- 1.0.0 — 2017-09-07
- 0.7.1 — 2017-07-06
- 0.7.0 — 2017-05-16
- 0.6.0 — 2017-05-15
- 0.5.0 — 2017-05-15
- 0.4.2 — 2017-05-11
- 0.4.1 — 2017-05-11
- 0.4.0 — 2017-05-11
- … 6 more at https://npm.io/package/viewport-observer/versions

## README

# ViewportObserver

[![Build Status](https://travis-ci.org/openfresh/viewport-observer.svg?branch=master)](https://travis-ci.org/openfresh/viewport-observer)
[![devDependency Status](https://david-dm.org/openfresh/viewport-observer/dev-status.svg)](https://david-dm.org/openfresh/viewport-observer?type=dev)
[![peerDependency Status](https://david-dm.org/openfresh/viewport-observer/peer-status.svg)](https://david-dm.org/openfresh/viewport-observer?type=peer)
[![codecov](https://codecov.io/gh/openfresh/viewport-observer/branch/master/graph/badge.svg)](https://codecov.io/gh/openfresh/viewport-observer)

> React Component that observe changes in the intersection of a target element with viewport using [`IntersectionObserver`](https://w3c.github.io/IntersectionObserver/)

## Install

```bash
$ npm install --save viewport-observer
```

This package depends on `IntersectionObserver`, so you probably need to polyfill via [w3c/IntersectionObserver Polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) before using this package.

## Usage

```jsx
// you probably need to polyfill
import 'intersection-observer';
import ViewportObserver from 'viewport-observer';

...

<ViewportObserver
  onChange={() => console.log('onChange')}
  onEnter={() => console.log('onEnter')}
  onLeave={() => console.log('onLeave')}>
  <div>{/* ... */}</div>
</ViewportObserver>
```

You can call `dispose()` of ViewportObserver instance to stop observing and dispose `IntersectionObserver` instance.

## Config

|  Property   | Type       | Default Value |
| ----------- | ---------- | ------------- |
| tagName | `String` | `div` |
| display | `String` | `''` |
| onChange | `Function` | `() => {}` |
| onEnter | `Function` | `() => {}` |
| onLeave | `Function` | `() => {}` |
| [root](https://wicg.github.io/IntersectionObserver/#dom-intersectionobserver-root) | `Node` | `null` |
| [rootMargin](https://wicg.github.io/IntersectionObserver/#dom-intersectionobserverinit-rootmargin) | [`DOMString`](https://heycam.github.io/webidl/#idl-DOMString) | `0px` |
| [threshold](https://wicg.github.io/IntersectionObserver/#dom-intersectionobserverinit-threshold)  | `Array<Number>` | `[0]` |

## Related

- [openfresh/super-image](https://github.com/openfresh/super-image): React component that render a image with object-fit and its fallback

## License

MIT © [FRESH!](https://github.com/openfresh)

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