0.0.1 • Published 4 years ago
@ysuzuki19/use-promised v0.0.1
use-promised
react hooks library for handing promise without async or useEffect.
install
npm i @ysuzuki19/use-promisedhow to use ( with jsonplaceholder )
import usePromised from '@ysuzuki19/use-promised';
interface Todo {
userId: number;
id: number;
title: string;
completed: boolean;
}
function App() {
const { data, loading } = usePromised<Todo[]>(() =>
fetch('https://jsonplaceholder.typicode.com/todos').then((response) =>
response.json()
)
);
if (loading || !data) {
return <p>loading...</p>;
}
const todos = data;
return (
<>
{todos.map((todo) => (
<h3>
{todo.completed ? '☑' : '☒'} {todo.title} ( id: {todo.id})
</h3>
))}
</>
);
}API
usePromised<T>(fn, deps, option);fn is function to return promise. (it is callable)
deps is dependencies array (like useEffect).
option is option for handling promise. it has following key-val.
| key | type | must | val |
|---|---|---|---|
| placeholder | T | false | initial data |
| interval | number | false | interval time (ms) for continuous refetch |
status usage
| name | type | |
|---|---|---|
| data | T | result of promise |
| loading | boolean | is true while loading |
| error | boolean | is true if promise failed |
| success | boolean | is true if promise succeed |
| refresh | () => void | function for refreshing (without deps) |