react-with-display-name

Set a predictable displayName for components wrapped in higher-order components

Install

npm install react-with-display-name --save

Enjoy

Have you ever wrapped your component in a higher-order component and then lost your displayName? There is no set way to either preserve or change the displayName at the higher-order component level. In order to get your displayName back and make it reliable, wrap your higher-order component in this higher-order component that is purely in charge of setting your displayName.

(from the specs...)

const origDisplayName = 'ShavedYak'

function newWrapper() {
  return function wrapComponentThang() {
    return class NewWrapper extends React.Component {
      render() {
        return <div>{this.props.children}</div>
      }
    }
  }
}

@withDisplayName(origDisplayName)
@newWrapper
class TestComponent extends React.Component {
  static displayName = origDisplayName
  render() {
    return (
      <div>Wrap Me</div>
    )
  }
}

// Makes certain that the displayName is 'ShavedYak', instead of the 'wrapComponentThang' that the newWrapper decoration gives it
getDisplayName(TestComponent).should.eql(origDisplayName)