The repromised from axross

axross / repromised Goto Github PK

View Code? Open in Web Editor NEW

🤝 Declarative promise resolver as a render props component

License: MIT License

JavaScript 0.76% TypeScript 99.24%

repromised's Introduction

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

TRY IT OUT HERE

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.

repromised's People

Stargazers

Watchers

repromised's Issues

Allow initial to be nullable

Allow initial prop to be type Value | null | undefined. Especially for promises that can return an object, that object may Required<Value> so having to define each item is cumbersome.

Recommend Projects