react-await-util/README.md

Processing asynchronous data in react functional components.

## react-await-util

> Processing asynchronous data in react functional components.

### Install

```shell
npm install react-await-util
```

### Usage

```jsx
import {useState} from "react";
import {isPending, useAwaitWatch} from "react-await-util";
import {Skeleton, Button, Flex, Spin} from "antd";

export default function App() {
  const [count, setCount] = useState(0);
  const add = () => setCount(count + 1);
  const [{first, status, value}, {update}] = useAwaitWatch({
    deps: count,
    handle: async (count) => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return "hello" + count;
    },
  });
  return (
    <Skeleton loading={first}>
      <Spin spinning={isPending(status)}>
        <Flex vertical align="center" gap="middle">
          <h1>{count} - {value}</h1>
          <Button.Group>
            <Button onClick={add}>add</Button>
            <Button onClick={update}>update</Button>
          </Button.Group>
        </Flex>
      </Spin>
    </Skeleton>
  );
}
```

## EOF