diff --git a/docs/api.md b/docs/api.md index edbe3b0db..cd5f3f46b 100644 --- a/docs/api.md +++ b/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 diff --git a/src/components/connect.js b/src/components/connect.js index 3b60ebbce..d391a126e 100644 --- a/src/components/connect.js +++ b/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)) { diff --git a/test/components/connect.spec.js b/test/components/connect.spec.js index 514eea018..7ce9e7949 100644 --- a/test/components/connect.spec.js +++ b/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
+ } + } + + expect(MyComponent.displayName).toEqual('Custom(MyComponent)') + }) }) })