material-ui-pull-to-refresh

Pull to refresh for react based on material-ui.

Installation

Install material-ui-pull-to-refresh.

npm install material-ui-pull-to-refresh

Then install its peer dependencies, if you haven't already:

npm install react material-ui

Usage

import PullToRefresh from 'material-ui-pull-to-refresh';
import React from 'react';
 
 
export default function App({children, onRefresh}) {
  return (
    <PullToRefresh onRefresh={onRefresh}>
      {children}
    </PullToRefresh>
  );
}

For a fully functional demo, clone this project, run npm install and run npm start.

PullToRefresh

A component that can be pulled in order to refresh content.

prop	type	default	required	description
children	ReactNode	null		The child nodes to render inside the element. Note: The refresh indicator will be prepended to the children.
dragMultiplier	Number	0.75		How much to move the refresh indicator down compared to how much the user drags down.
indicatorSize	Number	40		The size of the drag indicator in pixels.
maxDrag	Number	350		The maximum amount that the refresh indicator can be dragged down.
onRefresh	Function		✔️	A function to run when the indicator is pulled down and released. The function may either be synchronous or return a promise.
style	Shape	{}		Additional styling for the container element. overflowY will be set by this component.
topOffset	Number	0		The maximum offset which the user may have scrolled down. If this is set to a positive integer, the pulling down of the refresh indicator will start before the user hits the top of the scrolled element.

License

MIT