https://github.com/axross/repromised
🤝 Declarative promise resolver as a render props component
https://github.com/axross/repromised
promise react react-native render-props typescript
Last synced: 5 months ago
JSON representation
🤝 Declarative promise resolver as a render props component
- Host: GitHub
- URL: https://github.com/axross/repromised
- Owner: axross
- License: mit
- Created: 2018-07-31T18:51:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-20T07:07:42.000Z (about 6 years ago)
- Last Synced: 2024-11-16T16:16:37.961Z (5 months ago)
- Topics: promise, react, react-native, render-props, typescript
- Language: TypeScript
- Homepage:
- Size: 172 KB
- Stars: 20
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-render-props - repromised
- awesome-react-render-props - repromised
README
# [](https://github.com/axross/repromised)
[](https://www.npmjs.com/package/repromised)
[](https://github.com/axross/repromised/stargazers)
[](https://github.com/axross/repromised/blob/master/LICENSE)
**Repromised** is a component to build children by resolving a promise with
[Render Props](https://reactjs.org/docs/render-props.html) pattern.
- 🚀 Dependency free
- 🏄 Extremely tiny
- 🔌 Plug and Play
- 👷 Well tested
- 👔 Built with TypeScript
## Example
[**TRY IT OUT HERE**](https://codesandbox.io/s/0mkr4nkokv)
[
](https://codesandbox.io/s/0mkr4nkokv)
## Install
```
npm i -S repromised
```
## APIs
### ``
#### Props
| Name | Type | Required | Description |
| ---------- | ----------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------- |
| `promise` | `() => Promise` | ✓ | 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
`` 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
```jsx
import Repromised from 'repromised';
const SearchResult = ({ query }) => (
fetchByQuery(query)} initial={[]} key={query}>
{snapshot => snapshot.isLoading
?
:
{snapshot.value.map(result => )}
}
);
```
## License
MIT
## Contribute
Any feedback is welcome! You can help improving this project leaving Pull requests and helping with Issues.