https://github.com/erzhtor/react-async-data

See examples
https://github.com/erzhtor/react-async-data

async fetch react render-props request typescript

Last synced: about 2 months ago
JSON representation

See examples

• Host: GitHub
• URL: https://github.com/erzhtor/react-async-data
• Owner: erzhtor
• Created: 2018-09-08T11:37:35.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-17T13:06:36.000Z (over 7 years ago)
• Last Synced: 2025-08-09T14:18:23.158Z (10 months ago)
• Topics: async, fetch, react, render-props, request, typescript
• Language: JavaScript
• Homepage: https://erzhtor.github.io/react-async-data/
• Size: 784 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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

 {

    // fetch your data here

    return Promise.resolve({ title: "some cool title" });

  }}

>

  {({ status, data }) => (

    

      {status === "loading" && "loading"}

      {status === "error" && "error"}

      {status === "completed" && data && 
{data.title}
}

    

  )}


```

**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`._ **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)