0.1.2 • Published 6 years ago
react-async-data v0.1.2
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