Interserver React
IntersectionObserver simplified
Checkout the main interserver
package.
Features
- Tiny (~1kb minified)
- TypeScript ready
Installation
With yarn
:
yarn add interserver-react
With npm
:
npm install --save interserver-react
Usage
The useInterserver
function takes the same options as the interserver
function (top
, right
, bottom
, left
and once
).
import React from "react";import useInterserver from "interserver-react"; const MyComponent = const isIntersecting setRef = ; return <div => isIntersecting ? "Now you see me!" : "Oh, the darkness..." </div> ;;
Example
You can build a LazyImage
component, that only requests an image, when it is approaching the viewport:
// LazyImage.jsximport React from "react";import useInterserver from "interserver-react"; const LazyImage = alt src srcSet ...props const isIntersecting setRef = ; const imgSrc = isIntersecting ? src : undefined; const imgSrcSet = isIntersecting ? srcSet : undefined; return <img = = = = /> ;; LazyImagepropTypes = propTypes;LazyImagedefaultProps = defaultProps; ;
License
MIT