# react-view-tracker

> [![npm package][npm-badge]][npm] ![Module formats][module-formats]

Latest version **0.1.1** (published 2020-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-view-tracker
pnpm add react-view-tracker
yarn add react-view-tracker
bun add react-view-tracker
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-01-25 |
| First published | 2020-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Kaan Seyitogullari |
| Maintainers | kaansey |
| Keywords | react, view-tracker, tracker, intersection, observer, viewport, impression |

## Links

- npm: https://www.npmjs.com/package/react-view-tracker
- Repository: https://github.com/kaansey/react-view-tracker
- Homepage: https://kaansey.github.io/react-view-tracker/
- Issues: https://github.com/kaansey/react-view-tracker/issues
- npm.io page: https://npm.io/package/react-view-tracker

## Dependencies (1)

- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.7.0

## 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

- 0.1.1 (latest) — 2020-01-25
- 0.1.0 — 2020-01-25
- 0.0.1 — 2020-01-24

## README

# React View Tracker

[![npm package][npm-badge]][npm] ![Module formats][module-formats]

Simple react component that watch element when enters or leaves the browser viewport.

### [Demo](https://kaansey.github.io/react-view-tracker/)

### Installation

Add `react-view-tracker` dependency

```bash
yarn add react-view-tracker
npm install react-view-tracker --save
```

### Usage

```js
import ViewTracker from 'react-view-tracker'
```

```js
<ViewTracker
  onShow={(entry)=> {console.log(entry)})}
>
  <Content />
</ViewTracker>
```

### Options

| Name                  | Type               | Default                                | Required | Description                                                                                                                                                    |
| --------------------- | ------------------ | -------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **onShow**            | Function           | null                                   | false    | When element visible in the view port this function will be called with entry.                                                                                 |
| **onHide**            | Function           | null                                   | false    | When element visible then not visible in the view port this function will be called with entry                                                                 |  |
| **onStartObserving**  | Function           | null                                   | false    | When component did load it will `start` observing and call this function with container element                                                                |
| **onStopObserving**   | Function           | null                                   | false    | When component un mount it will `stop` observing and call this function with container element                                                                 |
| **setRootContainer**  | Function           | null                                   | false    | The Function should return Element that is used as the viewport for checking visibility of the target.                                                         |
| **once**              | boolean            | false                                  | false    | Only trigger this method once                                                                                                                                  |
| **visiblePercentage** | number \| number[] | 1                                      | false    | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
| **offset**            | object             | {left: 0, right: 0, top: 0, bottom: 0} | false    | Margin around the root.                                                                                                                                        |

### License

This project is licensed under the MIT License - see the
[LICENCE.md](./LICENCE.md) file for details

[npm-badge]: https://img.shields.io/npm/v/react-view-tracker?style=flat-square
[npm]: https://www.npmjs.com/package/react-view-tracker
[module-formats]: https://img.shields.io/badge/module%20formats-cjs%2C%20esm-green.svg?style=flat-square

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