Repromised is a component to build children by resolving a promise with Render Props pattern.
🚀 Dependency free- 🏄 Extremely tiny
🔌 Plug and Play👷 Well tested👔 Built with TypeScript
Example
Install
npm i -S repromised
APIs
<Repromised>
Props
| Name | Type | Required | Description |
|---|---|---|---|
promise |
() => Promise<Value> |
✓ | A function returning a promise (it will be called when the component is mounted) |
initial |
Value (the same type with the value what the promise should resolves) |
An initial value | |
children |
(snapshot: Snapshot) => ReactNode |
A render props function |
Snapshot
<Repromised> receives children as a render-props pattern function that gives a snapshot object which has the shape like the following:
| Name | Type | Description |
|---|---|---|
status |
"PENDING", "FULFILLED" or "REJECTED" |
The promise's status. In TypeScript you can use Status enum instead of string enum |
value |
Value (the value what the promise resolves) or null |
The value what the promise resolves. When status is "PENDING" or "REJECTED" and props.initial is not given, this is null |
error |
Error or null |
The error when the promise rejects. This is null if status is not "REJECTED" |
isLoading |
boolean |
A short hand value whether the promise's status is "PENDING" or not (same with to status === "PENDING"). |
requireValue |
Value (the value what the promise resolves) |
Same as value but it throws an error if value is null |
Usage
import Repromised from 'repromised';
const SearchResult = ({ query }) => (
<Repromised promise={() => fetchByQuery(query)} initial={[]} key={query}>
{snapshot => snapshot.isLoading
? <Loading />
: <ResultList>
{snapshot.value.map(result => <ResultListItem result={result} />)}
</ResultList>
}
</Repromised>
);License
MIT
Contribute
Any feedback is welcome! You can help improving this project leaving Pull requests and helping with Issues.