hackwaly/babel-plugin-react-wrapped-display-name

Add display name to memoized components

babel-plugin-react-wrapped-display-name

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

Example

In

export const FancyComponentName = memo(
  ({ name }) => <div>{name}</div>);

Out

export const FancyComponentName = memo(
  ({ name }) => <div>{name}</div>);

FancyComponentName.displayName = "Memo(FancyComponentName)";

Installation

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

Usage

Via babel.config.js (Recommended)

module.exports = (api) => ({
  plugins: [
    'babel-plugin-react-wrapped-display-name',
  ],
});

Via CLI

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

Via Node API

require('@babel/core').transform(code, {
  plugins: [
    'babel-plugin-react-wrapped-display-name',
  ],
});

Options