Package Exports

interserver-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (interserver-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Interserver React

npm bundle size NPM GitHub last commit

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