Detect when an element is becoming visible or hidden on the page.
npm install reactjs-visibility
⚠️ This plugin uses the Intersection Observer API that is not supported in every browser (currently supported in Edge, Firefox and Chrome). You need to include a polyfill to make it work on incompatible browsers.
importReactfrom"react";import{VisibilityObserver}from"reactjs-visibility";constApp=()=>{consthandleChangeVisibility=(visible)=>{if(visible){alert("I am now visible");}};constoptions={rootMargin: "200px",};return(<div><h1style={{fontSize: 500}}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam
exercitationem sit alias perferendis, odit ex optio iure assumenda!
Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id
excepturi minima.
</h1><VisibilityObserveronChangeVisibility={handleChangeVisibility}options={options}>
Loadmore...
</VisibilityObserver></div>);};Example 1
importReactfrom"react";import{useVisibility}from"reactjs-visibility";constApp=()=>{consthandleChangeVisibility=(visible)=>{if(visible){alert("I am now visible");}};constoptions={};const{ ref, visible }=useVisibility({onChangeVisibility: handleChangeVisibility,
options,});console.log(visible);return(<div><h1style={{fontSize: 50}}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam
exercitationem sit alias perferendis, odit ex optio iure assumenda!
Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id
excepturi minima.
</h1><divref={ref}>Loadmore...</div></div>);};Example 2
importReactfrom"react";import{useVisibility}from"reactjs-visibility";constApp=()=>{const{ ref, visible }=useVisibility();useEffect(()=>{if(visible){alert("I am now visible");}},[visible]);return(<div><h1style={{fontSize: 50}}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nam
exercitationem sit alias perferendis, odit ex optio iure assumenda!
Voluptatum, nulla. Assumenda iusto nesciunt adipisci totam repellat id
excepturi minima.
</h1><divref={ref}>Loadmore...</div></div>);};It's possible to pass the IntersectionObserver options object using the intersection
MIT license, Copyright (c) KingRayhan. For more information see LICENSE.