0.1.1 • Published 6 years ago

redux-lazy-scroll v0.1.1

Weekly downloads
203
License
MIT
Repository
github
Last release
6 years ago

npm version Heroku

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

PropsTypeRequiredDefaultDescription
hasMoreboolnotrueWhether there are more items that will be coming with the next request
isFetchingboolnofalseShould be set true while a request to api is being processed
errorMessagestring or boolnofalseSupply any error message that came from the api with this prop (this will help to avoid infinite loops in case of error)
loadMorefuncno() => {}The function that will be called after every scroll down when threshold is passed (will be only called if hasMore is true)
thresholdnumberno100The number of pixels above the bottom side of the page that scrollbar needs to reach to trigger loadMore
isParentScrollableboolnofalseWhether the scroll listener should be attached to the parent element or window
parentHeightnumber or stringif isParentScrollable is truefalseThe height of the container parent element. Must be set if isParentScrollable is true

License

MIT License. Copyright (c) 2017 Shota