1.0.1 • Published 3 years ago
@kucial/react-pull-to-refresh v1.0.1
@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
triggerPullToRefreshwheninitialStatus='finish' - update horizontal move prevent
Install
npm install @kucial/react-pull-to-refreshUsage
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 |