@codefeathers/use-promise

React use-promise

Use React Hooks to resolve a promise; a wrapper around useState and useEffect for data-fetching.

Installation

npm i @codefeathers/use-promise

Usage

import { usePromise } from "@codefeathers/use-promise";

const Search = () => {

	const [ search, setSearch ] = useState("");

	// if the Promise rejects, error is set, otherwise response is set
	const [ response, error, loading ] = usePromise(
		// Function that returns a Promise
		() => fetch(`/api/search?s=${search}`).then(x => x.json()),
		// default state of response
		[],
		// List of dependencies to watch for
		[ search ],
	);

	return <>
		<input value={search} onChange={e => setSearch(e.target.value)} />
		{loading ? <p>Loading...</p> : ""}
		{error ? <p>There was an error</p> :
			<ol>
				{response.map(each =>
					<li key={each.id}>{each.content}</li>)}
			</ol>
		}
	<>;

};