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 = => status data <React.Fragment> status === "loading" && "loading" status === "error" && "error" status === "completed" && data && <div>datatitle</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