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