react-use-intersection-observer
v0.0.0
Published
React hook for using intersetion observers.
Downloads
13
Maintainers
Readme
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