https://github.com/laiff/babel-plugin-react-wrapped-display-name

Add display name to memoized components
https://github.com/laiff/babel-plugin-react-wrapped-display-name

babel babel-plugin display-name memo react

Last synced: 9 days ago
JSON representation

Add display name to memoized components

• Host: GitHub
• URL: https://github.com/laiff/babel-plugin-react-wrapped-display-name
• Owner: Laiff
• License: mit
• Created: 2019-08-01T11:57:46.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T05:59:51.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T18:31:18.964Z (25 days ago)
• Topics: babel, babel-plugin, display-name, memo, react
• Language: JavaScript
• Homepage:
• Size: 815 KB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-react-wrapped-display-name

> 

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

[![build status][travis-image]][travis-url]

[![codecov][codecov-image]][codecov-url]

Solve problem with unnamed component, which created with arrow function.

## Example

### In

```jsx harmony

export const FancyComponentName = memo(

  ({ name }) => 
{name}
);


```

### Out

```jsx harmony

export const FancyComponentName = memo(

  ({ name }) => 
{name}
);


FancyComponentName.displayName = "Memo(FancyComponentName)";

```

## Installation

```sh

npm install @babel/core babel-plugin-react-wrapped-display-name

```

## Usage

### Via `babel.config.js` (Recommended)

```js

module.exports = (api) => ({

  plugins: [

    'babel-plugin-react-wrapped-display-name',

  ],

});

```

### Via CLI

```sh

babel --plugins babel-plugin-react-wrapped-display-name

```

### Via Node API

```js

require('@babel/core').transform(code, {

  plugins: [

    'babel-plugin-react-wrapped-display-name',

  ],

});

```

## Options

[codecov-image]: https://codecov.io/gh/laiff/babel-plugin-react-wrapped-display-name/branch/master/graph/badge.svg

[codecov-url]: https://codecov.io/gh/laiff/babel-plugin-react-wrapped-display-name

[npm-image]: https://img.shields.io/npm/v/babel-plugin-react-wrapped-display-name.svg

[npm-url]: https://www.npmjs.com/package/babel-plugin-react-wrapped-display-name

[travis-image]: https://img.shields.io/travis/laiff/babel-plugin-react-wrapped-display-name.svg

[travis-url]: https://travis-ci.org/laiff/babel-plugin-react-wrapped-display-name