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 } = useIntersector();
 
  return (
    <div ref={setRef}>
      {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.jsx
import React from "react";
import useInterserver from "interserver-react";
 
const LazyImage = ({ alt, src, srcSet, ...props }) => {
  const { isIntersecting, setRef } = useInterserver({
    once: true,
    top: 50,
    right: 50,
    bottom: 50,
    left: 50,
  });
  const imgSrc = isIntersecting ? src : undefined;
  const imgSrcSet = isIntersecting ? srcSet : undefined;
  return (
    <img
      {...props}
      src={imgSrc}
      srcSet={imgSrcSet}
      alt={alt}
      ref={setRef}
    />
  );
};
 
LazyImage.propTypes = propTypes;
LazyImage.defaultProps = defaultProps;
 
export default LazyImage;

License

MIT