set-wrapper-display-name

A utility to set the name and display name of a HOC-wrapped component.

Sets the name and displayName properties of a wrapper component based on the name of the HOC and the name of the wrapped component.

Installation

# npm
npm install set-wrapper-display-name

# yarn
yarn add set-wrapper-display-name

Example

import { createSetWrapperDisplayName } from 'set-wrapper-display-name'

const setWrapperDisplayName = createSetWrapperDisplayName('withFoo')

const withFoo = Component => {
  const Wrapper = props => (
    <Component {...props} foo="foo" />
  )

  setWrapperDisplayName(Wrapper, Component)

  return Wrapper
}

const Message = ({ foo, text }) => (
  <div>
    {foo}: {text}
  </div>
)

const MessageWithFoo = withFoo(Message)

<MessageWithFoo text="bar" />
// → <withFoo(Message) text="bar">
//     <Message text="bar" foo="foo" />
//   </withFoo(Message)>

API

createSetWrapperDisplayName(hocName): (Wrapper, Component) => void

Sets the name and displayName of Wrapper to hocName(inferredComponentName), where inferredComponentName is Component.displayName || Component.name || ''.

|Argument|Type|Description| |:---|:---|:---| |hocName|string|The display name of the HOC.| |Wrapper|ReactComponent|The wrapper component.| |Component|ReactComponent|The component to wrap.|

Component.displayName = 'MyComponent'

createSetDisplayName('foo')(Wrapper, Component)

Wrapper.displayName
Wrapper.name
// → 'foo(MyComponent)'

createSetDisplayName('foo')(Wrapper, Component)

Wrapper.displayName
Wrapper.name
// → 'foo(Component)'

createSetDisplayName('foo')(Wrapper, () => <div />)

Wrapper.displayName
Wrapper.name
// → 'foo()'

License

MIT