redux-lazy-scroll

Redux Lazy Scroll

React/Redux lazy scrolling functionality with full Redux implementation example.

Features

• Scrollable inside element or window
• Compatible with async requests
• All of the retrieved data is persisted in Redux, thus the library obeys single source of truth principle
• Comes with a full implementation example of both client side and server/api side
• For flexibility the library does not contain any built in textual messages (for example: loading or error messages). Examples how to add them are provided.

Demo

You can see the demo here: https://ancient-sands-71156.herokuapp.com/

Installation

npm install redux-lazy-scroll --save

Usage

class PostsLazyScroll extends Component {

  constructor(props) {
    super(props);
    this.loadPosts = this.loadPosts.bind(this);
  }

  loadPosts() {
    const {skip, limit} = this.props.postEntity;
    this.props.postsActions.fetchPosts(skip, limit);
  }

  render() {
    const {posts, isFetching, errorMessage, hasMore} = this.props.postEntity;
    return (
      <div className="container posts-lazy-scroll">
        <ReduxLazyScroll
          isFetching={isFetching}
          errorMessage={errorMessage}
          loadMore={this.loadPosts}
          hasMore={hasMore}
        >
          {posts.map(post => (
            <Post
              key={post._id}
              post={post}
            />
            ))
          }
        </ReduxLazyScroll>
        <div className="row posts-lazy-scroll__messages">
          {isFetching && <div className="alert alert-info"> Loading more posts... </div>}

          {!hasMore && !errorMessage &&
            <div className="alert alert-success">All the posts has been loaded successfully.</div>
          }

          {errorMessage && <div className="alert alert-danger">{errorMessage}</div>}
        </div>
      </div>
    );
  }
}

Examples

You can find full Redux example here

Props

Props	Type	Required	Default	Description
hasMore	bool	no	true	Whether there are more items that will be coming with the next request
isFetching	bool	no	false	Should be set true while a request to api is being processed
errorMessage	string or bool	no	false	Supply any error message that came from the api with this prop (this will help to avoid infinite loops in case of error)
loadMore	func	no	() => {}	The function that will be called after every scroll down when threshold is passed (will be only called if hasMore is true)
threshold	number	no	100	The number of pixels above the bottom side of the page that scrollbar needs to reach to trigger loadMore
isParentScrollable	bool	no	false	Whether the scroll listener should be attached to the parent element or window
parentHeight	number or string	if isParentScrollable is true	false	The height of the container parent element. Must be set if isParentScrollable is true

License

MIT License. Copyright (c) 2017 Shota