@kucial/react-pull-to-refresh
Code mainly is from react-component/m-pull-to-refresh and add some features.
Added Features:
- SSR rendering for
document.body
.getScrollContainer={() => typeof window === 'object' ? document.body : null}
- initialStatus control, can prevent init
triggerPullToRefresh
wheninitialStatus='finish'
- update horizontal move prevent
Install
npm install @kucial/react-pull-to-refresh
Usage
import PullToRefresh from '@kucial/react-pull-to-refresh';
class App extends React.Component {
state = { refreshing: false };
render() {
return (
<PullToRefresh
refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({ refreshing: true });
setTimeout(() => {
this.setState({ refreshing: false });
}, 1000);
}}
>
<ListOfContent />
</PullToRefresh>
);
}
}
props
type PullToRefreshStatus = 'activate' | 'deactivate' | 'release' | 'finish';
name | description | type | default |
---|---|---|---|
initialStatus | pass finish to prevent init refresh tirgger |
String | undefined |
getScrollContainer | container to attach event handler | Function | () => undefined |
direction | pull direction, can be up or down
|
String | down |
distanceToRefresh | distance to pull to refresh | number | 50 |
refreshing | Whether the view should be indicating an active refresh | bool | false |
onRefresh | Called when the view starts refreshing. | () => void | - |
indicator | indicator component | Function | (props: { status: PullToRefreshStatus }) => ReactNode |
className | additional css class of root dom node | String | - |
prefixCls | prefix class | String | 'kc-ptr' |
damping | pull damping, suggest less than 200 | number | 100 |
scale | damping scale | number | 0.6 |