@alexcambose/react-infinite-scroll

    1.0.1 • Public • Published

    react-infinite-scroll

    Build Status

    Another react infinite scroll package

    Demo and more docs

    Installation

    npm package

    npm i -S @alexcambose/react-infinite-scroll
    
    const InfiniteScroll = require('@alexcambose/react-infinite-scroll');
    // or
    import InfiniteScroll from '@alexcambose/react-infinite-scroll';

    Usage

    Basic example

    class Basic extends Component {
      state = {
        items: [],
        skip: 0,
        perLoad: 10,
        hasMore: true,
      };
     
      loadMore = () => {
        const { items, skip, perLoad } = this.state;
        fetch(
          `https://jsonplaceholder.typicode.com/posts?_start=${skip}&_limit=${perLoad}`
        )
          .then(res => res.json())
          .then(res => {
            this.setState({
              items: [...items, ...res],
              skip: skip + perLoad,
              hasMore: res.length >= perLoad,
            });
          });
      };
     
      render() {
        const { items, hasMore } = this.state;
        return (
          <InifiniteScroll hasMore={hasMore} loadMore={this.loadMore}>
            {items.map((e, i) => (
              <div key={i}>{e.title}</div>
            ))}
          </InifiniteScroll>
        );
      }
    }

    Props

    Property Name isRequired default type Description
    loadMore true - func A function that will be called after reaching the bottom. It should fetch data and append it to the current data object. Eg: [1,2,3] -> [1,2,3,4,5]. It receives in the first parameter a function that can be called after the fetching is done to check again if the user scroll is below the last piece of content to call the loadMore function again. Eg: loadMore = callback => get('url').then(() => callback())
    initialLoad false true bool If true it will call loadMore at the beginning, when componentDidMount.
    isLoading false false bool Toggles the loading animation
    loading false "Loading..." node Loading animation. Can be any valid react element.
    hasMore true - bool If there are no more items(skip + limt >= totalCount) this prop should change to false so loadMore is not called again and the `
    noMore false "No more items." node No more message. Can be any valid react element.
    auto false {} object Enabled auto mode. See description here.
    throttle false 100 number How many number of milliseconds need to pass so that the scroll handler will be executed once
    scrollableElement false window instanceof HTMLElement The HTML Element that will be used to get and calculate the scroll position.
    getScrollTop false scrollableElement.scrollY function Overrides the default method of getting the element scroll top position. The single parameter is represented by the scrollableElement.
    getElementHeight false scrollableElement.offsetHeight function Overrides the default method of getting the element height. The single parameter is represented by the scrollableElement

    Auto mode

    Auto mode is a feature that lets you create infinite scrolling lists without worrying about handling skip or checking if there are items left to fetch.

    Basic example

    class Basic extends Component {
      state = {
        items: [],
      };
     
      loadMore = (skip, perLoad) =>
        fetch(
          `https://jsonplaceholder.typicode.com/posts?_start=${skip}&_limit=${perLoad}`
        ).then(res => res.json());
     
      render() {
        const { items } = this.state;
        return (
          <InifiniteScroll
            auto={{
              loadMore: this.loadMore,
              perLoad: 10,
              onLoadMore: newItems =>
                this.setState({ items: [...items, ...newItems] }),
            }}
          >
            {items.map((e, i) => (
              <div key={i}>{e.title}</div>
            ))}
          </InifiniteScroll>
        );
      }
    }

    Props for auto mode

    Property Name isRequired default type Description
    loadMore true - func Function that will be called to fetch items. Takes two arguments: skip and perLoad. Must return a promise.
    onLoadMore true - func Callback that will be called when loadMore is resolved. Take as an arguments the result from the loadMore.
    perLoad true - number How many items to load at once. Will also be passed as an arguments to loadMore
    useCount false false bool If it's set to true, infinite scroll will calculate if it has more items based on the total number of items.
    count false - func The function that will be called to get the number of all items. Must return a number. If useCount is set to true and count prop is not specified it will use loadMore with the skip and perLoad set to 0.
    onCount false - func Called after count is resolved. Takes as an argument the items.
    onCountError false - func Called if count is rejected. Takes as an argument the promise error.
    onLoadMoreError false - func Called if loadMore is rejected. Takes as an argument the promise error.
    initialSkip false 0 number How many items to skip at the first load.

    Install

    npm i @alexcambose/react-infinite-scroll

    DownloadsWeekly Downloads

    33

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    45.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar