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

    0.1.0 • Public • Published

    react-inview-hook

    react-hooks with intersection-observer.

    Why?

    This module will cache IntersectionObservers (group by IntersectionObserverInit).

    That's reason is performance on IE11 with polyfill.

    Note

    This module uses Map and IntersectionObserver If you use this in es5 environment, should install polyfills below.

    • Map
      • @babel/polyfill or es6-map etc.
    • IntersectionObserver
      • intersection-observer

    Usage

    import React, { useState, useRef } from "react";
    import { useInView } from "react-inview-hook";
     
    export const SomeComponent = () => {
      const [isInView, setIsInView] = useState(false);
      const ref = useRef(null);
     
      useInView({
        ref,
        onEnter: () => setIsInView(true),
        onLeave: () => setIsInView(false)
      });
     
      return <div ref={ref}>isInView? {isInView ? "true" : "false"}</div>;
    };

    API

    useInView(props: UseInViewProps)

    type UseInViewProps = {
      ref: React.RefObject<Element>;
     
      onEnter?: (entry: IntersectionObserverEntry) => void;
     
      onLeave?: (entry: IntersectionObserverEntry) => void;
     
      unobserveOnEnter?: boolean; // default: false
     
      root?: React.RefObject<Element>; // default: null
     
      rootMargin?: string; // default: '0px'
     
      threshold?: number | number[]; // default: 0
    };

    Install

    npm i react-inview-hook

    DownloadsWeekly Downloads

    9

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    31.1 kB

    Total Files

    26

    Last publish

    Collaborators

    • hrsh7th