Add displayName option to connect()

Author: esamattis

docs/api.md

@@ -71,6 +71,7 @@ Instead, it *returns* a new, connected component class, for you to use.
 * [`options`] *(Object)* If specified, further customizes the behavior of the connector.
   * [`pure = true`] *(Boolean)*: If true, implements `shouldComponentUpdate` and shallowly compares the result of `mergeProps`, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. *Defaults to `true`.*
   * [`withRef = false`] *(Boolean)*: If true, stores a ref to the wrapped component instance and makes it available via `getWrappedInstance()` method. *Defaults to `false`.*
+  * [`displayName = 'Connect'`] *(String)*: Custom display name for the generated wrapper component. This can been seen in the React Devtools and in warning messages. *Defaults to `'Connect'`.*
 
 #### Returns
 

src/components/connect.js

@@ -46,14 +46,14 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
   }
 
   const finalMergeProps = mergeProps || defaultMergeProps
-  const { pure = true, withRef = false } = options
+  const { pure = true, withRef = false, displayName = 'Connect' } = options
   const checkMergedEquals = pure && finalMergeProps !== defaultMergeProps
 
   // Helps track hot reloading.
   const version = nextVersion++
 
   return function wrapWithConnect(WrappedComponent) {
-    const connectDisplayName = `Connect(${getDisplayName(WrappedComponent)})`
+    const connectDisplayName = `${displayName}(${getDisplayName(WrappedComponent)})`
 
     function checkStateShape(props, methodName) {
       if (!isPlainObject(props)) {

test/components/connect.spec.js

@@ -1868,5 +1868,16 @@ describe('React', () => {
 
       ReactDOM.unmountComponentAtNode(div)
     })
+
+    it('should allow custom displayName', () => {
+      @connect(null, null, null, {displayName: 'Custom'})
+      class MyComponent extends React.Component {
+        render() {
+          return <div></div>
+        }
+      }
+
+      expect(MyComponent.displayName).toEqual('Custom(MyComponent)')
+    })
   })
 })