Live example: https://dazld.github.io/react-on-visible/demo/

This is a higher order react component that applies the css class visible to the container when the element becomes more than 50% visible in the browser viewport.

It only attaches to browser events on the client, so is also safe to use for server rendering.

Viewport visibility is calculated by listening to a debounced window scroll event (10ms), and once the element has been found to be visible, no further changes are applied unless the bounce prop is set to true.

Percentage (100 based) of element that should be visible before triggering change. eg percent={80}

ClassName that should be added to element once visible

Callback when visibility changes. Argument is a boolean, true for visible, false for not.

Whether visibility should be continuously calculated, or just until the element becomes visible. defaults to false. Go easy with this, don't expect amazing performance with many tens or hundreds of elements (getBoundingClientRect).

The string representation of the html element used to wrap children. Defaults to a div

The user can override default props via this function. If you want everything to bounce, for example, then can do this:

import OnVisible, { setDefaultProps } from 'react-on-visible';

setDefaultProps({
    bounce: true,
    visibleClassName: 'appear',
    percent: 10
});

and so on.

import React from 'react';
import OnVisible from 'react-on-visible';

export default function someComponent(props) {
  return (
    <OnVisible className="my-container">
      <h1>I will be rendered inside a div that has class 'my-container' only until I become visible, at which point the container will have the classes 'my-container visible'</h1>
    </OnVisible>
  );
}

A further example is available in the demo folder of this project.

• Fixes onChange bug reported in dazld#27, and remove repeated invocation of onChange, only calling it when something actually changes.

• Added an option to configure the wrappingElement, instead of using div always (thanks @TomiTakussaari - dazld#23)

• Added an index.d.ts file for typescript users (thanks @KromDaniel)

• support react 16+ (thanks @schwers - dazld#17)
• change scheduler to use requestAnimationFrame instead of debounce (thanks @falconmick - dazld#14)
• tweak dependencies, move react to peer deps

• include a fix for this.holder being null in some situations #12

• added react-props package instead of using them directly from react (thanks @renoiser )

• Added bounce prop and function to set default props.

• added onChange callback prop option (thanks @rdjpalmer)