React component that triggers a function when the component enters or leaves the viewport. No complex configuration needed, just wrap your views and it handles the events.

Storybook demo: https://thebuilder.github.io/react-intersection-observer/

Install using Yarn:

yarn add react-intersection-observer

or NPM:

npm install react-intersection-observer --save

⚠️You also want to add the intersection-observer polyfill for full browser support. Check out adding the polyfill for details about how you can include it.

The easiest way to use the Observer, is to pass a function as the child. It will be called whenever the state changes, with the new value of inView. By default it will render inside a <div>, but you can change the element by setting tag to the HTMLElement you need.

import Observer from 'react-intersection-observer'

const Component = () => (
  <Observer>
    {inView => <h2>{`Header inside viewport ${inView}.`}</h2>}
  </Observer>
)

export default Component

Using the render prop you can get full control over the output. In addition to the inView prop, the render also receives a ref that should be set on the containing DOM element.

import Observer from 'react-intersection-observer'

const Component = () => (
  <Observer
    render={({ inView, ref }) => (
      <div ref={ref}>
        <h2>{`Header inside viewport ${inView}.`}</h2>
      </div>
    )}
  />
)

export default Component

You can monitor the onChange method, and control the state in your own component. This works with plain children, child as function or render props.

import Observer from 'react-intersection-observer'

const Component = () => (
  <Observer onChange={inView => console.log('Inview:', inView)}>
    <h2>Plain children are always rendered. Use onChange to monitor state.</h2>
  </Observer>
)

export default Component

The <Observer /> accepts the following props:

This module is used in react-scroll-percentage to monitor the scroll position of elements in view, useful for animating items as they become visible. This module is also a great example of using react-intersection-observer as the basis for more complex needs.

Intersection Observer is the API is used to determine if an element is inside the viewport or not. Browser support is pretty good, but Safari is still missing support.

Can i use intersectionobserver?

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

yarn add intersection-observer

Then import it in your app:

import 'intersection-observer'

If you are using Webpack (or similar) you could use dynamic imports, to load the Polyfill only if needed. A basic implementation could look something like this:

loadPolyfills()
  .then(() => /* Render React application now that your Polyfills are ready */)

/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
function loadPolyfills() {
  const polyfills = []

  if (!supportsIntersectionObserver()) {
    polyfills.push(import('intersection-observer'))
  }

  return Promise.all(polyfills)
}

function supportsIntersectionObserver() {
  return (
    'IntersectionObserver' in global &&
    'IntersectionObserverEntry' in global &&
    'intersectionRatio' in IntersectionObserverEntry.prototype
  )
}