React component for web pull t

React component for web pull to refresh and load more, 下拉刷新, 加载更多

npm install react-touch-loader

import Tloader from 'react-touch-loader'; <Tloader initializing={initializing} onRefresh={handleRefresh} hasMore={hasMore} onLoadMore={handleLoadMore} autoLoadMore={autoLoadMore} className="tloader some class"> <ul><li>some items</li></ul> </Tloader> Less needed

react-touch-loader will automaticly import the less file, please config your webpack for less.

You'd better set a className for Tloader, then give it a height make it as scroll area through css:

.tloader{ height: 500px; overflow-y: scroll; -webkit-overflow-scrolling: touch; } All props initializing 0: do not display the progress bar 1: start progress bar 2: progress to end onRefresh function (resove, reject) undefined: disable the pull to refresh action hasMore false: hide the load more footer (disable load more) true: show the load more footer onLoadMore function (resove) autoLoadMore true: automaticly load more on scroll to bottom, default false className custom css class Localization

The text is defined in css(less):

@pullingMsg: '下拉刷新'; @pullingEnoughMsg: '松开刷新'; @refreshingMsg: '正在刷新...'; @refreshedMsg: '刷新成功'; @loadingMsg: '正在加载...'; @btnLoadMore: '加载更多'; .tloader-msg:after{ .state-pulling &{ content: @pullingMsg } .state-pulling.enough &{ content: @pullingEnoughMsg; } .state-refreshed &{ content: @refreshedMsg; } } .tloader-loading:after{ content: @loadingMsg; .tloader-symbol &{ content: @refreshingMsg; } } .tloader-btn:after{ content: @btnLoadMore; }

So you can easily overwrite the defaults by css like this:

.tloader .tloader-btn:after{ content: 'Load More'; } Example

check code from example/app.jsx