https://github.com/wyze/babel-plugin-transform-react-stateless-component-name

Adds a display name to the stateless component in the React Dev Tools.
https://github.com/wyze/babel-plugin-transform-react-stateless-component-name

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wyze/babel-plugin-transform-react-stateless-component-name
• Owner: wyze
• License: mit
• Created: 2015-11-14T19:11:46.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-08-20T00:44:24.000Z (about 4 years ago)
• Last Synced: 2024-07-26T17:51:55.203Z (about 2 months ago)
• Language: JavaScript
• Size: 149 KB
• Stars: 32
• Watchers: 3
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license

Awesome Lists containing this project

README

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

[![Build Status][travis-image]][travis-url]

[![npm][npm-image]][npm-url]

[![Codecov.io][codecov-image]][codecov-url]

> 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

```jsx

// App.jsx

import React from 'react'

export default () => (

  
Hello World!

)


// index.js

import App from './App'

import React from 'react'

import { render } from 'react-dom'

render(, document.getElementById('root'))

```

### Before

![Before](.github/media/before.png)

### After

![After](.github/media/after.png)

## 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**

```json

{

  "plugins": [

    "transform-react-stateless-component-name"

  ]

}

```

### Via CLI

```

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

```

### Via Node API

```js

require('babel-core').transform('code', {

  plugins: [

    'transform-react-stateless-component-name',

  ],

})

```

## Change Log

> [Full Change Log](changelog.md)

### [v1.1.2](https://github.com/wyze/babel-plugin-transform-react-stateless-component-name/releases/tag/v1.1.2) (2017-11-07)

* [[`673e2a4128`](https://github.com/wyze/babel-plugin-transform-react-stateless-component-name/commit/673e2a4128)] - Update to use `write-changelog` package (Neil Kistner)

* [[`a853f804b1`](https://github.com/wyze/babel-plugin-transform-react-stateless-component-name/commit/a853f804b1)] - Remove all istanbul ignores (#10) (Thomas Grainger)

* [[`e875edd575`](https://github.com/wyze/babel-plugin-transform-react-stateless-component-name/commit/e875edd575)] - Avoid crash on block-arrow components with hoc wrapper (#9) (Thomas Grainger)

* [[`e98586fe5a`](https://github.com/wyze/babel-plugin-transform-react-stateless-component-name/commit/e98586fe5a)] - Ignore JSX Expression blocks (#7) (Daniel J)

## License

Copyright © 2015-2016 [Neil Kistner](//github.com/wyze)

Released under the MIT license. See [license](license) for details.

[travis-image]: https://img.shields.io/travis/wyze/babel-plugin-transform-react-stateless-component-name.svg?style=flat-square

[travis-url]: https://travis-ci.org/wyze/babel-plugin-transform-react-stateless-component-name

[npm-image]: https://img.shields.io/npm/v/babel-plugin-transform-react-stateless-component-name.svg?style=flat-square

[npm-url]: https://npmjs.com/package/babel-plugin-transform-react-stateless-component-name

[codecov-image]: https://img.shields.io/codecov/c/github/wyze/babel-plugin-transform-react-stateless-component-name.svg?style=flat-square

[codecov-url]: https://codecov.io/github/wyze/babel-plugin-transform-react-stateless-component-name