node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

babel-plugin-transform-react-stateless-component-name

babel-plugin-transform-react-stateless-component-name

Build Status npm Codecov.io

Adds a display name to the stateless component in the React Dev Tools.

Note: Now will add displayName property to functions as well to help with Snapshot testing.

Example

// App.jsx
import React from 'react'
 
export default () => (
  <h1>Hello World!</h1>
)
 
// index.js
import App from './App'
import React from 'react'
import { render } from 'react-dom'
 
render(<App />, document.getElementById('root'))

Before

Before

After

After

Installation

Yarn

$ yarn add --dev babel-plugin-transform-react-stateless-component-name

npm

$ npm install --save-dev babel-plugin-transform-react-stateless-component-name

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    "transform-react-stateless-component-name"
  ]
}

Via CLI

$ babel --plugins transform-react-stateless-component-name script.js

Via Node API

require('babel-core').transform('code', {
  plugins: [
    'transform-react-stateless-component-name',
  ],
})

License

Copyright © 2015-2016 Neil Kistner

Released under the MIT license. See license for details.