Nutrient Packed Morsels

    async-react-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    async-react-hooks

    npm

    useAsyncCallback

    Basic example

    import React from 'react';
    import { useAsyncCallback } from 'async-react-hooks';
     
    const doSomethingAsync = () =>
      new Promise((resolve, reject) => {
        setTimeout(() => (Math.random() > 0.5 ? resolve('Success!') : reject('Failed!')), 1000);
      });
     
    const Demo = () => {
      const [callback, { data, error, loading, refetch }] = useAsyncCallback(doSomethingAsync);
     
      return (
        <div>
          <button disabled={loading} onClick={callback}>Do Something</button>
          {loading && <div>Loading...</div>}
          {error && (
            <div>
              Error: {error} <button onClick={refetch}>Try again.</button>
            </div>
          )}
          {data && <div>{data} <button onClick={refetch}>Refresh</button></div>}
        </div>
      );
    };
     
    export default Demo;

    Example with dependencies

    import React, { useState } from 'react';
    import { useAsyncCallback } from 'async-react-hooks';
     
    const sayHello = (name) =>
      new Promise((resolve, reject) => {
        setTimeout(() => (Math.random() > 0.5 ? resolve(`Hello ${name}`) : reject(`Failed to greet ${name}!`)), 1000);
      });
     
    const GreetName = ({ name }) => {
      const [callback, { data, error, loading, refetch }] = useAsyncCallback(() => sayHello(name), [name]);
     
      return (
        <div>
          <button disabled={loading} onClick={callback}>
            Say Hello to {name}
          </button>
          {loading && <div>Loading...</div>}
          {error && (
            <div>
              Error: {error} <button onClick={refetch}>Try again.</button>
            </div>
          )}
          {data && <div>{data} <button onClick={refetch}>Refresh</button></div>}
        </div>
      )
    };
     
    const names = ['Jane', 'John', 'Mickey', 'Donald'];
    const getNextName = (name) => names[(names.indexOf(name) + 1) % 4];
     
    const Demo = () => {
      const [name, setName] = useState('Jane');
     
      return (
        <div>
          <div>
            Current Name: {name}
            <button onClick={() => setName(getNextName(name))}>Change name</button>
          </div>
          <GreetName name={name} />
        </div>
      );
    }
     
    export default Demo;

    useAsyncEffect

    Basic example

    import React from 'react';
    import { useAsyncEffect } from 'async-react-hooks';
     
    const doSomethingAsync = () =>
      new Promise((resolve, reject) => {
        setTimeout(() => (Math.random() > 0.5 ? resolve('Resolved!') : reject('Rejected!')), 1000);
      });
     
    const Demo = () => {
      const { data, error, loading, refetch } = useAsyncEffect(doSomethingAsync);
     
      if (loading) return <div>Loading...</div>;
      if (error) return <div>Error: {error} <button onClick={refetch}>Retry</button></div>;
     
      return <div>Success: {data} <button onClick={refetch}>Refresh</button></div>
    };
     
    export default Demo;

    Example with dependencies

    import React, { useState } from 'react';
    import { useAsyncEffect } from 'async-react-hooks';
     
    const sayHello = (name) =>
      new Promise((resolve, reject) => {
        setTimeout(() => (Math.random() > 0.5 ? resolve(`Hello ${name}`) : reject(`Failed to greet ${name}!`)), 1000);
      });
     
    const GreetName = ({ name }) => {
      const { data, error, loading, refetch } = useAsyncEffect(() => sayHello(name), [name]);
     
      if (loading) return <div>Loading...</div>;
      if (error) return <div>Error: {error} <button onClick={refetch}>Retry</button></div>;
     
      return <div>{data} <button onClick={refetch}>Refresh</button></div>
    };
     
    const names = ['Jane', 'John', 'Mickey', 'Donald'];
    const getNextName = (name) => names[(names.indexOf(name) + 1) % 4];
     
    const Demo = () => {
      const [name, setName] = useState('Jane');
     
      return (
        <div>
          <div>
            Current Name: {name}
            <button onClick={() => setName(getNextName(name))}>Change name</button>
          </div>
          <GreetName name={name} />
        </div>
      );
    }
     
    export default Demo;

    Todo

    • add error reporting example

    Install

    npm i async-react-hooks

    DownloadsWeekly Downloads

    5

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    13.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • charliecochran