rtl

react-touch-loader

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

Showing:

Popularity

Downloads/wk

78

GitHub Stars

246

Maintenance

Last Commit

1yr ago

Contributors

4

Package

Dependencies

0

Size (min+gzip)

1.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-touch-loader

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

Live demo

Usage

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.

Container layout

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial