use-promised

react hooks library for handing promise without async or useEffect.

install

npm i @ysuzuki19/use-promised

how 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) |