Skip to content

A lightweight React hook and utility to retry failed async actions automatically — ideal for handling failed requests, flaky connections, and offline scenarios.

Notifications You must be signed in to change notification settings

mysticwillz/react-retry-queue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📦 react-retry-queue

License: MIT

A lightweight React hook and utility to retry failed async actions automatically — ideal for handling failed requests, flaky connections, and offline scenarios.

⚡ Automatically persists and retries when the browser goes back online.


✨ Features

  • ✅ Retry failed async functions
  • ⏱ Configurable retry delay and max attempts
  • 🔁 Auto-retries in the background
  • 🧠 Persists across page reloads using localStorage
  • 🧹 Hook-based API for React

📦 Installation

npm install react-retry-queue uuid

💡 react must be installed in your project. Compatible with React 17, 18, and 19.


🚀 Usage

Basic Example

import React from "react";
import { useRetryQueue } from "react-retry-queue";

const SaveButton = () => {
  const { enqueue } = useRetryQueue();

  const handleSave = () => {
    enqueue(
      async () => {
        const response = await fetch("/api/save", {
          method: "POST",
          body: JSON.stringify({ data: "example" }),
          headers: { "Content-Type": "application/json" },
        });

        if (!response.ok) {
          throw new Error("Request failed");
        }
      },
      {
        maxAttempts: 5,
        delay: 3000, // Retry every 3 seconds
      }
    );
  };

  return <button onClick={handleSave}>Save</button>;
};

⚙️ API

enqueue(fn, options?)

Retries an asynchronous function on failure.

Parameters

Name Type Default Description
fn () => Promise<void> The async function to retry
maxAttempts number 3 Maximum retry attempts
delay number 5000 Milliseconds to wait between retries

🥪 Running Tests

The library uses Jest and @testing-library/react for tests.

npm install
npm test

📁 Project Structure

react-retry-queue/
├── src/
│   ├── index.ts
│   ├── queueManager.ts
│   └── useRetryQueue.ts
├── tests/
│   └── useRetryQueue.test.ts
├── dist/
├── package.json
├── tsconfig.json
└── README.md

🧹 Use Cases

  • Retry failed network requests
  • Queue up actions while offline
  • Retry background sync jobs
  • Ensure delivery of POST/PATCH requests

🛡 React Compatibility

This library is compatible with:

  • ✅ React 17
  • ✅ React 18
  • ✅ React 19

Declared as a peerDependency to avoid conflicts.


📄 License

MIT © Eze Williams Ezebuilo

About

A lightweight React hook and utility to retry failed async actions automatically — ideal for handling failed requests, flaky connections, and offline scenarios.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published