babel-plugin-styled-name

Add displayName and componentId for styled-components.

Installation

$ npm install babel-plugin-styled-name --save-dev

Example

Improve readability in devTools

  ↓

How?

const Button = styled.button`
  color: red;
`

  ↓

const Button = styled.button.withConfig({ displayName: 'Button', componentId: 'Button' })`
  color: red;
`

Usage

Use only for development!

Via .babelrc (Recommended)

.babelrc

{
  "env": {
    "development": {
      "plugins": ["styled-name"]
    }
  }
}

Via CLI

$ babel --plugins styled-name script.js

Via Node API

require('babel-core').transform('code', {
  plugins: ['styled-name']
});