React View Tracker

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

Demo

Installation

Add react-view-tracker dependency

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

Usage

import ViewTracker from 'react-view-tracker'

<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 file for details