Live

@ied/react-infinite-scroll

The best react infinite scroll component, on earth 🌍

Usage

Install

yarn add @ied/react-infinite-scroll

How to

import React from 'react'
import InfiniteScroll from '@ied/react-infinite-scroll'

const Component = (props) => {

  const infiniteActions = {
    loadMore,
  }

  const infiniteState = {
    hasMore,
    loading,
    error,
  }

  const infiniteCustoms = {
    spinner: <CustomSpinner />,
    reloader: <CustomReloader />,
  }

  const infiniteOptions = {
    threshold: 100,
  }

  const infiniteStyle = {
    height: 300,
  }

  return (
    <InfiniteScroll
      actions={infiniteActions}
      state={infiniteState}
      customs={infiniteCustoms}
      options={infiniteOptions}
      style={infiniteStyle}
    >
     {items.map((item, index) => <Item item={item} key={index} />)}
    </InfiniteScroll>
  )
}

PropTypes

  InfiniteScroll.propTypes = {
    children: React.PropTypes.node,
    style: React.PropTypes.shape({}),
    options: React.PropTypes.shape({
      threshold: React.PropTypes.number,
    }),
    actions: React.PropTypes.shape({
      loadMore: React.PropTypes.func.isRequired,
    }).isRequired,
    state: React.PropTypes.shape({
      hasMore: React.PropTypes.bool.isRequired,
      loading: React.PropTypes.bool.isRequired,
      error: React.PropTypes.bool.isRequired,
    }).isRequired,
    customs: React.PropTypes.shape({
      spinner: React.PropTypes.node,
      reloader: React.PropTypes.node,
    }),
  }