react-infinite-intersection

Made with create-react-library

Description

This is a project that implements an infinite scroll component using the intersectionObserver API.

Install

npm install --save react-infinite-intersection

Demo

• Demo Codesandbox

Usage

import React, { useState, useEffect, useCallback, useRef } from 'react';
import InfiniteIntersection from 'react-infinite-intersection';

const App = () => {
  // your code ...

  return (
    <>
      <h2>React Infinite Intersection Componenet Example</h2>
      <div id="app" ref={appRef}>
        <InfiniteIntersection
          callback={intersection observer callback}
          root={intersection observer root option}
          rootMargin={intersection observer root option}
          threshold={intersection observer threshold option}
          element={container element tag type}
          style={container element tag style}
          ref={intersection component ref}
        >
          {
            children.map(child => <ReactImage key={child} />)
          }
        </InfiniteIntersection>
      </div>
    </>
  );
}

intersection observer unobserve

const intersectionRef = useRef<HTMLButtonElement>(null);

// unobserve
intersectionRef.current.unobserve();

<InfiniteIntersection
  ref={intersection component ref}
>

License

MIT © [Luffy Yeon](https://github.com/Luffy Yeon)