React Router with AbortSignal

A TypeScript library for passing AbortSignal to React Router loaders.

Installation

Install the library using npm or yarn:

npm install signal-react-router
# or
yarn add signal-react-router

Usage

Create a decorator for React Router that fills the loader with an AbortSignal.

import { createSignalRouterDecorator } from "signal-react-router";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const signal = new AbortController().signal; // or any other AbortSignal
const decorateSignal = createSignalRouterDecorator(signal);

const [routes, options] = decorateSignal(
  [
    {
      path: "/",
      loader: async (loaderParams, { signal }) => {
        const data = await fetch("/api/data", { signal }); // this signal will be aborted when navigate away
        // ...
      },
    },
  ],
  {
    // router options...
  }
);
const router = createBrowserRouter(routes, options);
render(<RouterProvider router={router} />);

License

This project is licensed under the MIT License - see the LICENSE file for details.