Support custom displayName when using createInstance.

Author: ghengeveld

README.md

@@ -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">

src/index.js

@@ -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 {
@@ -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
 }