react-use-pull-to-refresh v1.0.5

React Pull to Refresh 🔄

A high-fidelity iOS-style pull-to-refresh component for React applications with PWA optimization and native performance.

Features ✨

• Authentic iOS Design - Pixel-perfect spinner animation and physics
• PWA Optimized - Automatic standalone mode detection
• Native Performance - 60fps animation with CSS transforms
• Flexible Control - Enable/disable based on environment
• Zero Dependencies - Lightweight (4.2kB gzipped)
• TypeScript Ready - Full type definitions included
• Accessible - ARIA labels and reduced motion support

Installation 📦

npm install react-use-pull-to-refresh
# or
yarn add react-use-pull-to-refresh

Basic Usage 🚀

import { PullToRefresh } from 'react-use-pull-to-refresh';
import 'react-use-pull-to-refresh/styles.css';

const App = () => {
  const handleRefresh = async () => {
    // Your refresh logic
    await fetchNewData();
  };

  return (
    <PullToRefresh onRefresh={handleRefresh}>
      <main>{/* Your content */}</main>
    </PullToRefresh>
  );
};

Advanced Usage 🔧

PWA-Only Activation

<PullToRefresh 
  onRefresh={handleRefresh}
  enableOnlyInPWA
>
  <PWAContent />
</PullToRefresh>

Conditional Disabling

<PullToRefresh
  onRefresh={handleRefresh}
  disabled={isLoading}
>
  <DashboardContent />
</PullToRefresh>

Props 📋

Customization 🎨

Override CSS variables in your global styles:

:root {
  --ptr-spinner-color: #007aff; /* iOS system blue */
  --ptr-spinner-size: 28px;     /* Exact iOS dimensions */
  --ptr-animation-speed: 1s;    /* Rotation duration */
}

Performance Tips ⚡

1. Wrap child components in React.memo()
2. Keep refresh handlers asynchronous
3. Use CSS containment for complex layouts
4. Avoid expensive operations during pull
5. Utilize disabled prop when inactive

Browser Support 🌐

Why Choose This Package? 🏆

License 📄

MIT © Ramin Mohammadi