interserver-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    Interserver React

    npm package 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

    Install

    npm i interserver-react

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    15.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • mefechoel