react-scroll-percentage

react-scroll-percentage

React component that reports the current scroll percentage of a element inside the viewport. It uses React Intersection Observer to only report the percentage when the element is inside the viewport.

import ScrollPercentage from 'react-scroll-percentage'

<ScrollPercentage>
  {({ percentage }) => (
    <h2>{`Percentage scrolled: ${percentage.toPrecision(2)}%.`}</h2>
  )}
</ScrollPercentage>

Demo

See https://thebuilder.github.io/react-scroll-percentage/ for a demo.

Installation

Install using Yarn:

yarn add react-scroll-percentage

or NPM:

npm install react-scroll-percentage --save

Polyfills

intersection-observer

The component requires the intersection-observer API to be available on the global namespace. At the moment it is included in Chrome, Firefox, Opera and Edge. Make sure to include the polyfill to support other browsers like IE and Webkit.

You can import the polyfill directly or use a service like polyfill.io that can add it when needed.

yarn add intersection-observer

Then import it in your app

import 'intersection-observer'

requestAnimationFrame

To optimize scroll updates, requestAnimationFrame is used. Make sure your target browsers support it, or include the required polyfill.

Props

The <Observer /> accepts the following props:

Name	Type	Default	Required	Description
tag	String		false	Element tag to use for the wrapping component
children	func/node		false	Children should be either a function or a node
threshold	Number	0	false	Number between 0 and 1 indicating the the percentage that should be visible before triggering
onChange	Func		false	Call this function whenever the in view state changes

Example code

Child as function

The basic usage pass a function as the child. It will be called whenever the state changes, with an object containing inView and percentage.

import ScrollPercentage from 'react-scroll-percentage'

<ScrollPercentage>
  {({ percentage, inView }) => (
    <h2>{`Percentage scrolled: ${percentage.toPrecision(2)}%.`}</h2>
  )}
</ScrollPercentage>

OnChange callback

You can monitor the onChange method, and control the state in your own component. The child node will always be rendered.

import ScrollPercentage from 'react-scroll-percentage'

<ScrollPercentage onChange={state => console.log(state)}>
  <h2>
    Plain children are always rendered. Use onChange to monitor state.
  </h2>
</Observer>