react-common-loadmore

1.0.2 • Public • Published

SnapShots

a configurable turnplate in React

react-loadmore

$ npm install --save  react-loadmore

how to use

  import ReactLoadMore from "react-loadmore";
 <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
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

Readme

Keywords

Package Sidebar

Install

npm i react-common-loadmore

Weekly Downloads

0

Version

1.0.2

License

ISC

Unpacked Size

7.01 MB

Total Files

12

Last publish

Collaborators

  • warren9527