Repromised NPM

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>
);