async-boundary

<AsyncBoundary>

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

⚙️ Install

yarn add async-boundary

🚀 Usage

import { AsyncBoundary } from 'async-boundary';

const SuspensfulContainer = () => {
  return (
    <AsyncBoundary>
      <SlowSuspensfulComponent />
    </AsyncBoundary>
  );
};

const SlowSuspensfulComponent = () => {
  const data = resource.data.read();

  return <h1>{data.thing}</h1>;
};

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