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 = = => snapshotisLoading ? <Loading /> : <ResultList> snapshotvalue </ResultList> </Repromised>;
License
MIT
Contribute
Any feedback is welcome! You can help improving this project leaving Pull requests and helping with Issues.