README
react-hook-use-promise
usePromise is a react hook that updates the component state with the current Promise state.
Examples
1. Basic usage of usePromise
The hook expects a function that returns a Promise as an argument. If the promise itself was passed as an argument, a new Promise would be created for every rerender.
You can decide when you want to create the Promise by calling createPromise()
on the hook result.
import React from 'react';
import { usePromise, PromiseStatus } from 'react-use-promise-hook';
export function SomeComponent() {
const [promiseState, createPromise] = usePromise(
() => Promise.resolve('I´m the promise result.')
)
switch (promiseState.status) {
case PromiseStatus.NotCreated: {
createPromise();
return <div>Let´s create the promise.</div>
}
case PromiseStatus.Pending: {
return <div>The promise is currently pending.</div>
}
case PromiseStatus.Fulfilled: {
return <div>{promiseState.value}</div>
}
case PromiseStatus.Rejected: {
return <div>The promise was rejected with reason: {promiseState.reason}</div>
}
}
}
2. usePromise with arguments
The function that returns a promise can also have arguments. This could be useful if you want to create different promises for different user inputs for example.
import React from 'react';
import { usePromise, PromiseStatus } from 'react-use-promise-hook';
export function SomeComponent() {
const [promiseState, createPromise] = usePromise(
(resultId: number) => Promise.resolve(`I´m the promise result ${resultId}.`)
)
switch (promiseState.status) {
case PromiseStatus.NotCreated: {
return (
<div>
<button onClick={() => createPromise(1)}>Create Promise 1</button>
<button onClick={() => createPromise(2)}>Create Promise 2</button>
</div>
)
}
case PromiseStatus.Pending: {
return <div>The promise is currently pending.</div>
}
case PromiseStatus.Fulfilled: {
return <div>{promiseState.value}</div>
}
case PromiseStatus.Rejected: {
return <div>The promise was rejected with reason: {promiseState.reason}</div>
}
}
}
3. usePromise with Promise.all
import React from 'react';
import { usePromise, PromiseStatus } from 'react-use-promise-hook';
export function SomeComponent() {
const [promiseState, createPromise] = usePromise(
() => Promise.all([
Promise.resolve('I´m the first result.'),
Promise.resolve('I´m the second result.'),
])
)
switch (promiseState.status) {
case PromiseStatus.NotCreated: {
createPromise();
return <div>Let´s create both promises.</div>
}
case PromiseStatus.Pending: {
return <div>The promise is currently pending.</div>
}
case PromiseStatus.Fulfilled: {
return (
<div>
<span>{promiseState.value[0]}</span>
<span>{promiseState.value[1]}</span>
</div>
)
}
case PromiseStatus.Rejected: {
return <div>The promise was rejected with reason: {promiseState.reason}</div>
}
}
}
4. usePromise with Promise.race
import React from 'react';
import { usePromise, PromiseStatus } from 'react-use-promise-hook';
export function SomeComponent() {
const [promiseState, createPromise] = usePromise(
() => Promise.race([
Promise.resolve('I´m the first result.'),
Promise.resolve('I´m the second result.'),
])
)
switch (promiseState.status) {
case PromiseStatus.NotCreated: {
createPromise();
return <div>Let´s create both promises.</div>
}
case PromiseStatus.Pending: {
return <div>The promise is currently pending.</div>
}
case PromiseStatus.Fulfilled: {
return (
<div>
<span>The faster one was: {promiseState.value}</span>
</div>
)
}
case PromiseStatus.Rejected: {
return <div>The promise was rejected with reason: {promiseState.reason}</div>
}
}
}
Promise states
The hook result can be of 4 different types which represent the state of the Promise.
NotCreated
When you haven´t called the createPromise()
function yet:
type PromiseNotCreatedState = {
status: PromiseStatus.NotCreated;
}
Pending
When the promise is created but neither fulfilled nor rejected yet:
type PromisePendingState = {
status: PromiseStatus.Pending
}
Fulfilled
When the promise was fulfilled:
type PromiseFulfilledState<T> = {
status: PromiseStatus.Fulfilled;
value: T;
}
Rejected
When the promise was rejected:
type PromiseRejectedState = {
status: PromiseStatus.Rejected;
reason: any;
}
PromiseSwitch
Is a component which allows you to render the Promise state more conveniently.
Basic example
import React from 'react';
import { usePromise, PromiseSwitch } from 'react-use-promise-hook';
export function SomeComponent() {
const [promiseState, createPromise] = usePromise(
() => Promise.resolve('I´m the promise result.')
)
return (
<PromiseSwitch
state={[promiseState, createPromise]}
renderOnNotCreated={(createPromise) => <div onClick={createPromise}>The promise hasn´t been created.</div>}
renderOnPending={() => <div>The promise is pending.</div>}
renderOnFulfilled={(value) => <div>{value}</div>}
renderOnRejected={(reason) => <div>Something went wrong: {reason}</div>}
/>
)
}
Example with createOnNotCreated
If the current promise state is NotCreated
, you can create the Promise immediately when the PromiseSwich component is mounted.
import React from 'react';
import { usePromise, PromiseSwitch } from 'react-use-promise-hook';
export function SomeComponent() {
const [promiseState, createPromise] = usePromise(
(name: String) => Promise.resolve(`I´m the promise result ${name}.`)
)
return (
<PromiseSwitch
state={[promiseState, createPromise]}
createOnNotCreated={create => create('John')}
renderOnNotCreated={() => <div>The promise hasn´t been created.</div>}
renderOnPending={() => <div>The promise is pending.</div>}
renderOnFulfilled={(value) => <div>{value}</div>}
renderOnRejected={(reason) => <div>Something went wrong: {reason}</div>}
/>
)
}