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.