Neurological Phenomenon Multiplexer

    react-infinite-loading-web
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

    react-infinite-loading-web

    A light-weight infinite loading component for React-powered websites

    Installation

    npm install react-infinite-loading-web
    

    Basic Usage

    Typically, you have a list of some items (say, product cards) inside of some scrollable wrapper component (say, a fixed-height div with overflow-y: auto style):

    ...
    
    <SomeWrapper>
      {someItems.map((item) => <SomeItem item />)}
    </SomeWrapper>
    ...
    

    You want to dinamically load more items once a user reaches the end of the items list. For that, just import the component and place it right below the list:

    ...
    import InfiniteLoading from 'react-infinite-loading-web';
    ...
    
    <SomeWrapper>
      {someItems.map((item) => <SomeItem item />)}
      <InfiniteLoading load={loadHandler}/>
    </SomeWrapper>
    ...
    

    where loadHandler is your function called when you reach the end of the wrapper. This function should change the state of the component by calling the loaded method once the loading if finished, or the done method once the loading isn't needed anymore:

    const loadHandler = (state) => {
      const items = ... // get new items
      ... // add the new items to the items list
    
      if (items.length) {
        state.loaded(); // change state to `loaded`
        return;
      }
    
      state.done(); // stop the loading
    }
    

    That's it! Enjoy!

    Optional Usage

    Use a custom spinner

    Optionally, you can provide your own spinner:

    ...
    import InfiniteLoading from 'react-infinite-loading-web';
    ...
    
    <SomeWrapper>
      {someItems.map((item) => <SomeItem item />)}
      <InfiniteLoading
        load={loadHandler}
        spinner={<div className="some-spinner" />}
      />
    </SomeWrapper>
    ...
    

    Use window as a wrapper

    Optionally, you can use window as a wrapper:

    ...
    import InfiniteLoading from 'react-infinite-loading-web';
    ...
    
    <SomeWrapper>
      {someItems.map((item) => <SomeItem item />)}
      <InfiniteLoading
        load={loadHandler}
        useWindow
      />
    </SomeWrapper>
    ...
    

    Increase the load distance

    Optionally, you can force the component to attempt to load sooner by increasing the minimum distance between the component and the bottom of the wrapper (default is 20 px):

    ...
    import InfiniteLoading from 'react-infinite-loading-web';
    ...
    
    <SomeWrapper>
      {someItems.map((item) => <SomeItem item />)}
      <InfiniteLoading
        load={loadHandler}
        distance={100}
      />
    </SomeWrapper>
    ...
    

    License

    MIT

    Install

    npm i react-infinite-loading-web

    DownloadsWeekly Downloads

    0

    Version

    0.1.3

    License

    ISC

    Unpacked Size

    17.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • alexsabdev