<AsyncBoundary>

A React async-boundary that couples an error-boundary as well as a suspense container

⚙️ Install

1yarn add async-boundary

🚀 Usage

1import { AsyncBoundary } from 'async-boundary';
2
3const SuspensfulContainer = () => {
4  return (
5    <AsyncBoundary>
6      <SlowSuspensfulComponent />
7    </AsyncBoundary>
8  );
9};
10
11const SlowSuspensfulComponent = () => {
12  const data = resource.data.read();
13
14  return <h1>{data.thing}</h1>;
15};

Please read more about suspense at Concurrent React (Suspense for Data Fetching)

🔎 API

AsyncBoundary: FunctionComponent

Props

• fallback: The ReactChild to render whilst Suspending
• errorFallback: The ReactChild to render when an error occurred.
  • Has a retryFn callback passed to it, calling it will remount the <AsyncBoundary> children.
• onError: The componentDidCatch callback.

License

MIT © Marais Rossouw