Skip to content

Latest commit

 

History

History
51 lines (40 loc) · 1.08 KB

README.md

File metadata and controls

51 lines (40 loc) · 1.08 KB

React Infinite Scroll

Clean and fast scroll listener wrapper component with callback

props:

  • scrollFunc (function): callback. (required)
  • scrollAnchor (string): element to listen scroll event. (default: window)
  • loading (bool): flag to prevent multiple callback triggers (default: false)
import infiniteScrollify from '...'

Example - Wrapping up

const PostList = ({ posts }) => (
  <ul>{posts.map(post => <li>{post.title}</li>)}</ul>
)
export default infiniteScrollify(PostList);

Rendering - Simple

<PostList posts={posts} scrollFunc={this.handleFetch()} />

Example - with Redux

class App extends React.Component {
  // ...
  <PostList posts={this.props.posts} loading={this.props.loading} />
  // ...
}

const mapStateToProps = state => ({
  posts: state.posts.list,
  loading: state.posts.isLoading
});

const mapDispatchToProps = {
  scrollFunc: () => fetchPosts(), // scrollFunc callback prop is required
};

export default connect(mapStateToProps, mapDispatchToProps)(infiniteScrollify(App));

TODOS

  • Tests
  • npm