{"repo":"roderickhsiao/react-in-viewport","free":true,"listed":false,"github":"https://github.com/roderickhsiao/react-in-viewport","clone":"git clone https://github.com/roderickhsiao/react-in-viewport.git","description":"Detect if React component is in viewport","language":"TypeScript","stars":351,"topics":["intersection-observer","react","viewport","lazyload"],"license":"MIT","category":"analytics","readme_excerpt":"React In Viewport Library to detect whether or not a component is in the viewport, using the Intersection Observer API. This library also uses MutationObserver to detect the change of the target element. Examples Demo Why A common use case is to load an image when a component is in the viewport (lazy load). We have traditionally needed to monitor scroll position and calculate the viewport size, which can be a scroll performance bottleneck. Modern browsers now provide a new API--Intersection Observer API--which can make implementating this effort much easier and performant. Polyfill For browsers not supporting the API, you will need to load a polyfill. Browser support table Design The core logic is written using React Hooks. We provide two interfaces: you can use handleViewport , a higher order component (HOC) for class based components, or use hooks directly, for functional components. The HOC acts as a wrapper and attaches the intersection observer to your target component. The HOC will then pass down extra props, indicating viewport information and executing a callback function when the component enters and leaves the viewport. Usages Using Higher Order Component When wrapping your component with handleViewport HOC, you will receive inViewport props indicating whether the component is in the viewport or not. handleViewport HOC accepts three params: handleViewport(Component, Options, Config) Params Type Description ----------- --------------- --------------------------------","default_branch":null,"files":null,"tree":[],"storefront":"/r/roderickhsiao","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/roderickhsiao/react-in-viewport/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}