Skip to content

Commit

Permalink
Support custom displayName when using createInstance.
Browse files Browse the repository at this point in the history
  • Loading branch information
ghengeveld committed Dec 30, 2018
1 parent 57f7634 commit eac99b5
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 2 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,8 @@ import { createInstance } from "react-async"

const loadCustomer = ({ customerId }) => fetch(`/api/customers/${customerId}`).then(...)

const AsyncCustomer = createInstance({ promiseFn: loadCustomer })
// createInstance takes a defaultProps object and a displayName (both optional)
const AsyncCustomer = createInstance({ promiseFn: loadCustomer }, "AsyncCustomer")

const MyComponent = () => (
<AsyncCustomer customerId="123">
Expand Down
8 changes: 7 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const isFunction = arg => typeof arg === "function"
* createInstance allows you to create instances of Async that are bound to a specific promise.
* A unique instance also uses its own React context for better nesting capability.
*/
export const createInstance = (defaultProps = {}) => {
export const createInstance = (defaultProps = {}, displayName = "Async") => {
const { Consumer, Provider } = React.createContext()

class Async extends React.Component {
Expand Down Expand Up @@ -203,6 +203,12 @@ export const createInstance = (defaultProps = {}) => {
Async.Resolved = Resolved
Async.Rejected = Rejected

Async.displayName = displayName
Async.Pending.displayName = `${displayName}.Pending`
Async.Loading.displayName = `${displayName}.Loading`
Async.Resolved.displayName = `${displayName}.Resolved`
Async.Rejected.displayName = `${displayName}.Rejected`

return Async
}

Expand Down

0 comments on commit eac99b5

Please sign in to comment.