# babel-plugin-transform-component-name

> Add display name to react components

Latest version **0.1.1** (published 2018-11-13) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-transform-component-name
pnpm add babel-plugin-transform-component-name
yarn add babel-plugin-transform-component-name
bun add babel-plugin-transform-component-name
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-11-13 |
| First published | 2017-07-31 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | dk00 |
| Maintainers | dk00 |
| Keywords | babel-plugin |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-transform-component-name
- Repository: https://github.com/dk00/babel-plugin-transform-component-name
- Homepage: https://github.com/dk00/babel-plugin-transform-component-name#readme
- Issues: https://github.com/dk00/babel-plugin-transform-component-name/issues
- npm.io page: https://npm.io/package/babel-plugin-transform-component-name

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2018-11-13
- 0.1.0 — 2018-11-12
- 0.0.3 — 2018-10-20
- 0.0.2 — 2017-09-02
- 0.0.1 — 2017-07-31

## README

# babel-plugin-transform-component-name

Add display name to react components.

[![build status](https://travis-ci.org/dk00/babel-plugin-transform-component-name.svg)](https://travis-ci.org/dk00/babel-plugin-transform-component-name)
[![coverage](https://codecov.io/gh/dk00/babel-plugin-transform-component-name/branch/master/graph/badge.svg)](https://codecov.io/gh/dk00/babel-plugin-transform-component-name)
[![npm](https://img.shields.io/npm/v/babel-plugin-transform-component-name.svg)](https://npm.im/babel-plugin-transform-component-name)
[![dependencies](https://david-dm.org/dk00/babel-plugin-transform-component-name/status.svg)](https://david-dm.org/dk00/babel-plugin-transform-component-name)

Let react dev tools show component names instead of unknown, by adding names to functional components for development builds.

If lower case started JSX element type names are available in the scope, they are treated as custom components.

JSX attribute `class` are renamed to `className`.

## Examples

**avatar.jsx**

```jsx
export default ({url}) =>
<div class="avatar">
  <img src={url} />
</div>
```

**Out**

```jsx
export default Object.assign(({url}) =>
<div className="avatar">
  <img src={url} />
</div>, {displayName: 'avatar'})
```

**In**

```jsx
import UserScreen from './user-screen'
import userAvatar from './user-avatar'

<UserScreen>
  <user-avatar />
</UserScreen>
```

**Out**

```jsx
import UserScreen from './user-screen';
import userAvatar from './user-avatar';

const _userAvatar = userAvatar;
<UserScreen>
  <_userAvatar />
</UserScreen>;
```

## Installation

```
npm i --save-dev babel-plugin-transform-component-name
```

## Usage

*.babelrc.js*

```js
module.exports = {
  plugins: ['transform-component-name']
}
```

### Via CLI

```
babel --plugins transform-component-name script.js
```

### Via Node API

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

---
_Source: https://npm.io/package/babel-plugin-transform-component-name · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._