react-async-data

React Async Data Component

• Easy fetch and pass data
• dynamic refetch based on timeout interval
• custom refetch
• TypeScript typings

Install

npm install --save react-async-data

or

yarn add react-async-data

Usage

import Component

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

<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 with custom refetch ./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