A React component that notifies you when it enters or exits the viewport. Based on a IntersectionObserver, resulting in improved performance. Not supported by IE and some others, see here - https://caniuse.com/?search=IntersectionObserver
npm install react-visibility-detectorA React component that notifies you when it enters or exits the viewport.
Based on a IntersectionObserver, resulting in improved performance.
Not supported by IE and some others, see here - https://caniuse.com/?search=IntersectionObserver
!GitHub package.json version !NPM !npm bundle size
Install
----
yarn add react-visibility-detector
Example
----
To run the example locally:
- yarn build
- cd example
- yarn
- yarn start
- open http://localhost:1234 in your browser
General usage goes something like:
``js
import VisibilityDetector from 'react-visibility-detector';
function handleVisibilityChange ({ visible, directionX, directionY }) {
console.log('Element is now %s', visible ? 'visible' : 'hidden');
console.log('Horizontal direction %s', directionX); // left, right, or none if no changed or initial
console.log('Vertical direction %s', directionY); // up, down or none if no changed or initial
}
function MyComponent (props) {
return (
...content goes here...
);
}
// with hook
import { useChangeVisibility } from 'react-visibility-detector';
function onVisibilityChange ({ visible, directionX, directionY }) {
console.log('Element is now %s', visible ? 'visible' : 'hidden');
console.log('Horizontal direction %s', directionX); // left, right, or none if no changed or initial
console.log('Vertical direction %s', directionY); // up, down or none if no changed or initial
}
function MyComponent (props) {
const targetRef = useRef(null);
useChangeVisibility({ targetRef, onVisibilityChange });
return (
Try it out
----
Run the example.
Props
----
-
css class for styling, default undefined
- - distance to the viewport at which the detector will trigger, default 0
- - callback, called when changed detector visibility
- childrenHook props
----
-
- distance to the viewport at which the detector will trigger, default 0
- - callback, called when changed detector visibility
- targetRef` - ref to target elementLicense
----
MIT