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.