react-suspense-async-effect

    1.14.0 • Public • Published

    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.

    NPM

    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;

    License

    MIT © Anton Bagdatyev (Tonix)

    Install

    npm i react-suspense-async-effect

    DownloadsWeekly Downloads

    0

    Version

    1.14.0

    License

    MIT

    Unpacked Size

    492 kB

    Total Files

    7

    Last publish

    Collaborators

    • tonix-tuft