A beautiful, customizable React component for pull-to-refresh functionality with smooth Material Design animations. Perfect for mobile and desktop applications.
Works seamlessly on both mobile touch devices and desktop with mouse interactions.
Beautiful Material Design animations with customizable colors and smooth transitions.
Optimized for performance with efficient rendering and smooth 60fps animations.
Customize colors, thresholds, animations, and behavior to match your app's design.
Small bundle size with tree-shaking support. Only includes what you need.
Full TypeScript support with comprehensive type definitions included.
Install React Pull to Refresh using your favorite package manager:
npm install react-material-pull-to-refreshyarn add react-material-pull-to-refreshpnpm add react-material-pull-to-refreshPeer Dependencies: React 16.8+ and React DOM 16.8+ are required.
import React from 'react';
import PullToRefresh from 'react-material-pull-to-refresh';
function App() {
const handleRefresh = async () => {
// Your refresh logic here
await fetchNewData();
};
return (
<PullToRefresh onRefresh={handleRefresh}>
<div>
<!-- Your content here -->
<h1>Pull down to refresh</h1>
<p>Content goes here...</p>
</div>
</PullToRefresh>
);
}<PullToRefresh
onRefresh={handleRefresh}
threshold={100}
maxPull={200}
color="#ff6b6b"
backgroundColor="#f8f9fa"
>
<YourContent />
</PullToRefresh>| Prop | Type | Default | Description |
|---|---|---|---|
children |
ReactNode | - | The content to wrap with pull-to-refresh functionality |
onRefresh |
() => Promise<void> | () => Promise.resolve() |
Function called when refresh is triggered |
threshold |
number | 80 |
Distance in pixels to trigger refresh |
maxPull |
number | 180 |
Maximum pull distance allowed |
color |
string | '#2563eb' |
Color of the spinner and arrow |
backgroundColor |
string | '#ffffff' |
Background color of the indicator bubble |