@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 when initialStatus='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