<ViewportSensor>

Tracks if children are in viewport. Can be used as FaCC or a regular component.

Under-the-hood it uses <ViewportObserverSensor>, which in turn uses IntersectionObserver API to detect if your component is in viewport.

If IntersectionObserver API is not available it falls back and lazily downloads <ViewportScrollSensor>, which uses document's scroll event to track if your component is in viewport.

Usage

import {ViewportSensor} from 'libreact/lib/ViewportSensor';

<ViewportSensor threshold={1} onChange={console.log}>{(state) =>
  <pre>{JSON.stringify(state, null, 4)}</pre>
}</ViewportSensor>

Props

Sensor's props have the following signature

interface IViewportSensorProps {
  threshold?: number;
  onChange?: (state: IViewportObserverSensorState) => void;
}

, where

• threshold - optional, number, percentage how much does your component have to intersect with viewport to be considered visible. Defaults to 0.
• onChange - optional, callback called when sensor changes its state, receives the state of the sensor as a single argument.

State

Sensor's state has the following signature

interface IViewportSensorState {
  visible: boolean;
}

<ViewportScrollSensor>

Is the same as <ViewportSensor>, but uses only window scroll event to check for visibility changes.

The <ViewportScrollSensor> has an additional prop throttle, which is a number in milliseconds specifying how much to throttle document's scroll event.

<ViewportObserverSensor>

Is the same as <ViewportSensor>, but uses only IntersectionObserver to detect element's intersection with viewport.

withViewport() HOC

HOC that merges viewport boolean prop into enhanced component's props. Uses <ViewportSensor> under-the-hood.

import {withViewport} from 'libreact/lib/ViewportSensor';

const MyComp = (props) =>
  <pre style={{fontFamily: 'monospace'}}>
    {JSON.stringify(props, null, 4)}
  </pre>;

const MyCompWithViewport = withViewport(MyComp);

<MyCompWithViewport />

You can overwrite the inject prop name and <ViewportSensor> props

const MyCompWithVisibility = withViewport(MyComp, 'visible', {
  threshold: 1
});

@withViewport decorator

React stateful component decorator that adds viewport prop.

import {withViewport} from 'libreact/lib/ViewportSensor';

@withViewport
class MyComp extends Component {

}

Specify different prop name and <ViewportSensor> props

@withViewport('visible', {threshold: 1})
class MyComp extends Component {

}