# react-async-data

> React Data Fetch Component

Latest version **0.1.2** (published 2018-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-async-data
pnpm add react-async-data
yarn add react-async-data
bun add react-async-data
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-09-12 |
| First published | 2018-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 60 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Erzhan Torokulov |
| Maintainers | erzhtor |
| Keywords | react, async, fetch, request, render-props |

## Links

- npm: https://www.npmjs.com/package/react-async-data
- Repository: https://github.com/erzhtor/react-async-data
- Homepage: https://github.com/erzhtor/react-async-data#readme
- Issues: https://github.com/erzhtor/react-async-data/issues
- npm.io page: https://npm.io/package/react-async-data

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2018-09-12
- 0.1.1 — 2018-09-09
- 0.1.0 — 2018-09-08

## README

# react-async-data

> React Async Data Component

[![Build Status](https://travis-ci.org/erzhtor/react-async-data.svg?branch=master)](https://travis-ci.org/erzhtor/react-async-data) [![NPM](https://img.shields.io/npm/v/react-async-data.svg)](https://www.npmjs.com/package/react-async-data) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

- Easy fetch and pass data
- dynamic refetch based on timeout interval
- custom refetch
- _TypeScript_ typings

## Install

```bash
npm install --save react-async-data
```

or

```bash
yarn add react-async-data
```

## Usage

import Component

```jsx
import React from "react";
import ReactAsyncData from "react-async-data";
```

```jsx
<ReactAsyncData
  timeout={1000}
  fetch={() => {
    // fetch your data here
    return Promise.resolve({ title: "some cool title" });
  }}
>
  {({ status, data }) => (
    <React.Fragment>
      {status === "loading" && "loading"}
      {status === "error" && "error"}
      {status === "completed" && data && <div>{data.title}</div>}
    </React.Fragment>
  )}
</ReactAsyncData>
```

**More examples**

- Example with dynamic timeout [./example/src/TimerExample.js](example/src/TimerExample.js)
- Example with custom refetch [./example/src/RefetchExample.js](example/src/RefetchExample.js)

## Props

- **`fetch`**: _`() => Promise<TData>`._ **Required**. Function that returns promise. Any data that promise resolves passed to children as _data_ object.
- **`timeout`**: _`number`._ Optional. If passed refetches every given _timeout_ (millis).
- **`fetchId`**: _`number | string | boolean`._ Optional. Refetches every time when changed.
- **`children`**: _`(args: { loading: boolean; error?: any; data?: TData;}) => React.ReactNode`._ Optional. Children would be called with the specified args params.

## License

MIT © [Erzhan Torokulov](https://github.com/erzhtor)

---
_Source: https://npm.io/package/react-async-data · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._