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 = const withFoo = { const Wrapper = <Component ="foo" /> return Wrapper} const Message = foo text <div> foo: text </div> const MessageWithFoo = <MessageWithFoo ="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. |
ComponentdisplayName = 'MyComponent' Wrapper Component WrapperdisplayNameWrappername// → 'foo(MyComponent)'
Wrapper Component WrapperdisplayNameWrappername// → 'foo(Component)'
Wrapper <div /> WrapperdisplayNameWrappername// → 'foo()'