Skip to content

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

License

Notifications You must be signed in to change notification settings

Broltes/react-touch-loader

Repository files navigation

react-touch-loader

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

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published