Narcoleptic's Patch Mangler

    react-infinite-refresh-load-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    react-infinite-refresh-load-hook

    A react hook that allow you to inifinite scrolling. it support both loadmore and refresh in either direction.

    useInfiniteScroll hook uses Intersection Observer API to monitor the visability of the anchor elements. As long as a anchor element is visable on the container, the handler of that anchor will be called.

    Install

      npm i react-infinite-refresh-load-hook
    
      or
    
      yarn add react-infinite-refresh-load-hook
    
      // ES6
      import useInfiniteScroll from 'react-infinite-refresh-load-hook'
      // or commonjs
      var useInfiniteScroll = require('react-infinite-refresh-load-hook');

    Using

    const App = () => {
      const handleLoadMore = React.useCallback(() => {
        ...
      }, []);
    
      const handleRefresh = React.useCallback(() => {
        ...
      }, []);
    
      const [infiniteRef, onLoadAnchorRef, onRefreshAnchorRef] = useInfiniteScroll({
        onLoadMore: handleLoadMore,
        onRefresh: handleRefresh,
      });
    
      return (
        <React.Fragment>
          {/* Set the container ref, which is scrollable */}
          {/* if this is not set, it will default to window */}
          <ul ref={infiniteRef}>
            {data.map((_, idx) => {
              if (idx === 0) {
                return (
                  <li
                    key={idx}
                    // Set the ref of element that will fire Refresh
                    // when it is visable on the container
                    ref={onRefreshAnchorRef}
                  >
                    {idx}
                  </li>
                );
              }
              if (idx === data.length - 2) {
                return (
                  <li
                    key={idx}
                    // Set the ref of element that will fire loadMore
                    // when it is visable on the container
                    ref={onLoadAnchorRef}
                  >
                    {item.value}
                  </li>
                );
              }
              return (
                <li key={idx}>{idx}</li>
              );
            })}
          </Scrollable>
        </React.Fragment>
      );
    };

    Props

    • onLoadMore: will be call if onLoadAnchorRef is passed to an element and the element is visable on the container.
    • onLoadThreshold: From 0 to 1 Intersection Observer API
    • onRefresh: will be call if onRefreshAnchorRef is passed to an element and the element is visable on the container.
    • onRefreshThreshold: From 0 to 1. Intersection Observer API

    Install

    npm i react-infinite-refresh-load-hook

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    45.8 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar