Fix ambiguous import issue by renaming the standalone helper components. Improved the TS type definitions.

Author: ghengeveld

README.md

@@ -267,7 +267,7 @@ by passing in the state, or with `<Async>` by using Context. Each of these compo
 rendering of its children based on the current state.
 
 ```jsx
-import { useAsync, Pending, Fulfilled, Rejected } from "react-async"
+import { useAsync, IfPending, IfFulfilled, IfRejected } from "react-async"
 
 const loadCustomer = async ({ customerId }, { signal }) => {
   // ...
@@ -277,16 +277,16 @@ const MyComponent = () => {
   const state = useAsync({ promiseFn: loadCustomer, customerId: 1 })
   return (
     <>
-      <Pending state={state}>Loading...</Pending>
-      <Rejected state={state}>{error => `Something went wrong: ${error.message}`}</Rejected>
-      <Fulfilled state={state}>
+      <IfPending state={state}>Loading...</IfPending>
+      <IfRejected state={state}>{error => `Something went wrong: ${error.message}`}</IfRejected>
+      <IfFulfilled state={state}>
         {data => (
           <div>
             <strong>Loaded some data:</strong>
             <pre>{JSON.stringify(data, null, 2)}</pre>
           </div>
         )}
-      </Fulfilled>
+      </IfFulfilled>
     </>
   )
 }
@@ -607,7 +607,7 @@ invoked after the state update is completed. Returns the error to enable chainin
 React Async provides several helper components that make your JSX more declarative and less cluttered.
 They don't have to be direct children of `<Async>` and you can use the same component several times.
 
-### `<Initial>` / `<Async.Initial>`
+### `<IfInitial>` / `<Async.Initial>`
 
 Renders only while the deferred promise is still waiting to be run, or you have not provided any promise.
 
@@ -622,9 +622,9 @@ Renders only while the deferred promise is still waiting to be run, or you have
 ```jsx
 const state = useAsync(...)
 return (
-  <Initial state={state}>
+  <IfInitial state={state}>
     <p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>
-  </Initial>
+  </IfInitial>
 )
 ```
 
@@ -650,7 +650,7 @@ return (
 </Async.Initial>
 ```
 
-### `<Pending>` / `<Async.Pending>`
+### `<IfPending>` / `<Async.Pending>`
 
 This component renders only while the promise is pending (loading / unsettled).
 
@@ -667,9 +667,9 @@ Alias: `<Async.Loading>`
 ```jsx
 const state = useAsync(...)
 return (
-  <Pending state={state}>
+  <IfPending state={state}>
     <p>This text is only rendered while performing the initial load.</p>
-  </Pending>
+  </IfPending>
 )
 ```
 
@@ -683,7 +683,7 @@ return (
 <Async.Pending>{({ startedAt }) => `Loading since ${startedAt.toISOString()}`}</Async.Pending>
 ```
 
-### `<Fulfilled>` / `<Async.Fulfilled>`
+### `<IfFulfilled>` / `<Async.Fulfilled>`
 
 This component renders only when the promise is fulfilled (resolved to a value, could be `undefined`).
 
@@ -700,9 +700,9 @@ Alias: `<Async.Resolved>`
 ```jsx
 const state = useAsync(...)
 return (
-  <Fulfilled state={state}>
+  <IfFulfilled state={state}>
     {data => <pre>{JSON.stringify(data)}</pre>}
-  </Fulfilled>
+  </IfFulfilled>
 )
 ```
 
@@ -716,7 +716,7 @@ return (
 </Async.Fulfilled>
 ```
 
-### `<Rejected>` / `<Async.Rejected>`
+### `<IfRejected>` / `<Async.Rejected>`
 
 This component renders only when the promise is rejected.
 
@@ -730,7 +730,7 @@ This component renders only when the promise is rejected.
 
 ```jsx
 const state = useAsync(...)
-return <Rejected state={state}>Oops.</Rejected>
+return <IfRejected state={state}>Oops.</IfRejected>
 ```
 
 ```jsx
@@ -741,7 +741,7 @@ return <Rejected state={state}>Oops.</Rejected>
 <Async.Rejected>{error => `Unexpected error: ${error.message}`}</Async.Rejected>
 ```
 
-### `<Settled>` / `<Async.Settled>`
+### `<IfSettled>` / `<Async.Settled>`
 
 This component renders only when the promise is fulfilled or rejected.
 
@@ -755,7 +755,7 @@ This component renders only when the promise is fulfilled or rejected.
 
 ```jsx
 const state = useAsync(...)
-return <Settled state={state}>{state => `Finished at ${state.finishedAt.toISOString()}`</Settled>
+return <IfSettled state={state}>{state => `Finished at ${state.finishedAt.toISOString()}`</IfSettled>
 ```
 
 ## Usage examples

examples/with-typescript/src/App.tsx

@@ -1,11 +1,29 @@
 import React, { Component } from "react"
-import Async, { createInstance } from "react-async"
+import Async, { createInstance, useAsync, IfPending, IfRejected, IfFulfilled } from "react-async"
 import DevTools from "react-async-devtools"
 import "./App.css"
 
 const promiseFn = () => Promise.resolve("baz")
 const CustomAsync = createInstance({ promiseFn })
 
+const UseAsync = () => {
+  const state = useAsync({ promiseFn })
+  return (
+    <>
+      <IfPending state={state}>Loading...</IfPending>
+      <IfRejected state={state}>{error => `Something went wrong: ${error.message}`}</IfRejected>
+      <IfFulfilled state={state}>
+        {data => (
+          <div>
+            <strong>Loaded some data:</strong>
+            <pre>{JSON.stringify(data, null, 2)}</pre>
+          </div>
+        )}
+      </IfFulfilled>
+    </>
+  )
+}
+
 class App extends Component {
   render() {
     return (
@@ -19,6 +37,7 @@ class App extends Component {
           <CustomAsync>
             <CustomAsync.Resolved>{data => <>{data}</>}</CustomAsync.Resolved>
           </CustomAsync>
+          <UseAsync />
         </header>
       </div>
     )

packages/react-async/src/Async.js

@@ -1,7 +1,7 @@
 import React from "react"
 
 import globalScope from "./globalScope"
-import { Initial, Pending, Fulfilled, Rejected, Settled } from "./helpers"
+import { IfInitial, IfPending, IfFulfilled, IfRejected, IfSettled } from "./helpers"
 import propTypes from "./propTypes"
 import { actionTypes, init, dispatchMiddleware, reducer as asyncReducer } from "./reducer"
 
@@ -201,11 +201,11 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
 
   if (propTypes) Async.propTypes = propTypes.Async
 
-  const AsyncInitial = props => <Consumer>{st => <Initial {...props} state={st} />}</Consumer>
-  const AsyncPending = props => <Consumer>{st => <Pending {...props} state={st} />}</Consumer>
-  const AsyncFulfilled = props => <Consumer>{st => <Fulfilled {...props} state={st} />}</Consumer>
-  const AsyncRejected = props => <Consumer>{st => <Rejected {...props} state={st} />}</Consumer>
-  const AsyncSettled = props => <Consumer>{st => <Settled {...props} state={st} />}</Consumer>
+  const AsyncInitial = props => <Consumer>{st => <IfInitial {...props} state={st} />}</Consumer>
+  const AsyncPending = props => <Consumer>{st => <IfPending {...props} state={st} />}</Consumer>
+  const AsyncFulfilled = props => <Consumer>{st => <IfFulfilled {...props} state={st} />}</Consumer>
+  const AsyncRejected = props => <Consumer>{st => <IfRejected {...props} state={st} />}</Consumer>
+  const AsyncSettled = props => <Consumer>{st => <IfSettled {...props} state={st} />}</Consumer>
 
   AsyncInitial.displayName = `${displayName}.Initial`
   AsyncPending.displayName = `${displayName}.Pending`

packages/react-async/src/helpers.js

@@ -11,7 +11,7 @@ const renderFn = (children, ...args) =>
  * @prop {Object} state React Async state object
  * @prop {boolean} persist Show until we have data, even while pending (loading) or when an error occurred
  */
-export const Initial = ({ children, persist, state = {} }) =>
+export const IfInitial = ({ children, persist, state = {} }) =>
   state.isInitial || (persist && !state.data) ? renderFn(children, state) : null
 
 /**
@@ -21,7 +21,7 @@ export const Initial = ({ children, persist, state = {} }) =>
  * @prop {Object} state React Async state object
  * @prop {boolean} initial Show only on initial load (data is undefined)
  */
-export const Pending = ({ children, initial, state = {} }) =>
+export const IfPending = ({ children, initial, state = {} }) =>
   state.isPending && (!initial || !state.value) ? renderFn(children, state) : null
 
 /**
@@ -31,7 +31,7 @@ export const Pending = ({ children, initial, state = {} }) =>
  * @prop {Object} state React Async state object
  * @prop {boolean} persist Show old data while pending (promise is loading)
  */
-export const Fulfilled = ({ children, persist, state = {} }) =>
+export const IfFulfilled = ({ children, persist, state = {} }) =>
   state.isFulfilled || (persist && state.data) ? renderFn(children, state.data, state) : null
 
 /**
@@ -41,7 +41,7 @@ export const Fulfilled = ({ children, persist, state = {} }) =>
  * @prop {Object} state React Async state object
  * @prop {boolean} persist Show old error while pending (promise is loading)
  */
-export const Rejected = ({ children, persist, state = {} }) =>
+export const IfRejected = ({ children, persist, state = {} }) =>
   state.isRejected || (persist && state.error) ? renderFn(children, state.error, state) : null
 
 /**
@@ -51,13 +51,13 @@ export const Rejected = ({ children, persist, state = {} }) =>
  * @prop {Object} state React Async state object
  * @prop {boolean} persist Show old data or error while pending (promise is loading)
  */
-export const Settled = ({ children, persist, state = {} }) =>
+export const IfSettled = ({ children, persist, state = {} }) =>
   state.isSettled || (persist && state.value) ? renderFn(children, state) : null
 
 if (propTypes) {
-  Initial.propTypes = propTypes.Initial
-  Pending.propTypes = propTypes.Pending
-  Fulfilled.propTypes = propTypes.Fulfilled
-  Rejected.propTypes = propTypes.Rejected
-  Settled.propTypes = propTypes.Settled
+  IfInitial.propTypes = propTypes.Initial
+  IfPending.propTypes = propTypes.Pending
+  IfFulfilled.propTypes = propTypes.Fulfilled
+  IfRejected.propTypes = propTypes.Rejected
+  IfSettled.propTypes = propTypes.Settled
 }