Package Exports

react-suspense-async-effect
react-suspense-async-effect/dist/index.es.js
react-suspense-async-effect/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-suspense-async-effect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-suspense-async-effect

Asynchronous, feels synchronous.

A library to perform asynchronous effects in React following the Suspense API principles providing asynchronous curried functions with a synchronous feel.

Installation

npm install --save react-suspense-async-effect

Install peer dependencies:

npm install --save react react-dom

Usage

// Example.js
import React from "react";
import { useAsyncEffect, asyncEffect } from "react-suspense-async-effect";

// Create a promise factory.
const promiseFactory = (param1, param2, param3) =>
  new Promise((resolve) => {
    setTimeout(resolve, 3000, { param1, param2, param3 });
  });

// Preload the asynchronous effect (Render-as-you-fetch).
const preloadedAsyncEffect = asyncEffect(promiseFactory)("param1 value")(
  "param2 value",
  "param3 value"
);

function Example() {
  // Use the asynchronous effect.
  // If the asynchronous data is available at this point,
  // render the component, otherwise suspend.
  const [data] = useAsyncEffect(preloadedAsyncEffect);
  return (
    <div>
      <pre>
        <code>{JSON.stringify(data, void 0, 4)}</code>
      </pre>
    </div>
  );
}
export default Example;

// App.js
import React, { Suspense } from "react";
import Example from "./Example";

function App() {
  return (
    <div>
      <Suspense fallback="Loading...">
        <Example />
      </Suspense>
    </div>
  );
}
export default App;