@ied/react-infinite-scroll

The real react infinite scroll component

Stats

StarsIssuesVersionUpdatedCreatedSize
@ied/react-infinite-scroll
2005.0.34 years ago4 years agoMinified + gzip package size for @ied/react-infinite-scroll in KB

Readme

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,
    }),
  }

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.