react-use-intersection-observer

React hook for using intersection observers.

Installation

Using npm:

$ npm install --save react-use-intersection-observer

Using yarn:

$ yarn add react-use-intersection-observer

Since this module uses React Hooks, to use this module you'll need to install at least version 16.8.0 of react and react-dom:

$ yarn add react@^16.8.0 react-dom@^16.8.0

Usage

import React, { useRef } from 'react';
import useIntersectionObserver from 'react-use-intersection-observer';
 
function Example() {
  const ref = useRef();
  const [intersection] = useIntersectionObserver(ref);
 
  const style = {
    background: intersection && intersection.isIntersecting ? 'red' : 'blue',
    height: 50,
    width: 50
  };
 
  return <div style={style} />;
}

API

useIntersectionObserver(Ref, ?Object): Array<IntersectionObserverEntry>

Receives a ref and an optional object and returns a list of intersections reported by an IntersectionObserver.

Contributing

Please feel free to submit any issues or pull requests.

License

MIT