Skip to content
a load more list component base on React
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist remove the postcss Jul 25, 2019
example change the readme Jul 25, 2019
src
.npmignore
README.md change the readme Jul 25, 2019
package.json remove the postcss Jul 25, 2019
react-loadmore-snapshot.gif version 1.0 May 24, 2019
react-loadmore-snapshot.mov version 1.0 May 24, 2019

README.md

SnapShots

a load more list component base on React

react-more-load

$ npm install --save  react-more-load

how to use

  import ReactLoadMore from "react-more-load";
  const NoResult = ()=> <span>No more Result,~~</span>;
  const Footer = ()=> <span>loading....~~</span>;
 <ReactLoadMore
        onBottom={this.loadMore.bind(this)}
        fetching={fetching}
        hasMore={hasMore}
        NoResult={NoResult}
        Footer={null}
      >
        {dataList.map((item,index) => {
          return (
            <div style={{ height: "35vw", position: "relative" }} key={index}>
              <img
                src={item.extra.thumbnail_pic}
                style={{
                  width: "40vw",
                  height: "25w",
                  borderRadius:'3vw',
                  position: "absolute",
                  top: "2vw",
                  left: "2vw"
                }}
              />
              <span style={{ fontSize: "4vw", position: "absolute",
                  top: "5vw",
                  fontWeight:'bold',
                  left: "46vw"}}>{item.title}</span>
            </div>
          );
        })}
      </ReactLoadMore>

you can also fork the code and npm start to run the example.

props

params type desc necessary
onBottom func when the user scroll to the bottom true
fetching bool isFetchingData true
hasMore bool has more data true
NoResult func return the ui dom of no result false
Footer func return the ui dom loading Footer false

more

you can fork and check the example code to see the fully complishment.

If you have any of ideas,don't forget to leave an issue! And also star haha

License

ISC

You can’t perform that action at this time.