@abortor/react

React bindings for the Abortor core package. This library makes it easier to manage async lifecycles in React components using the Scope abstraction from @abortor/core.

Installation

# install peer deps (React 18+)
pnpm add react react-dom

# install abortor core & react adapter
pnpm add @abortor/core @abortor/react
Copy

Usage

1. Create a scope in your component

import { useScope } from "@abortor/react";

function UserProfile() {
  const scope = useScope();

  React.useEffect(() => {
    const controller = new AbortController();

    scope
      .fetch("/api/user", { signal: controller.signal })
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((err) => {
        if (err.name !== "AbortError") {
          console.error(err);
        }
      });

    return () => controller.abort();
  }, [scope]);

  return <div>User profile loading...</div>;
}
Copy

2. Parallel async work

function Dashboard() {
  const scope = useScope();

  React.useEffect(() => {
    scope
      .all([scope.fetch("/api/stats"), scope.fetch("/api/notifications")])
      .then(([stats, notifications]) => {
        console.log(stats, notifications);
      });
  }, [scope]);

  return <div>Loading dashboard...</div>;
}
Copy

API Surface

All React hooks are thin adapters over the Core Scope API:

• useScope() → returns a Scope bound to the component lifecycle.

For full details on Scope, see @abortor/core.

Peer Dependencies

• React: >=18
• @abortor/core: matched version

Ensure both are installed in your project.

API Reference

View the Reference Docs