probablyup/babel-plugin-react-displayname

Babel plugin to generate React components' displayName while preserving tree-shaking

@probablyup/babel-plugin-react-displayname

Automatically generate display names for React components, while retaining tree-shaking support in bundlers.

Setup

1. Install the dependency

yarn add --dev @probablyup/babel-plugin-react-displayname

2. Add the plugin to your babel configuration

{
  "plugins": ["@probablyup/babel-plugin-react-displayname"]
}

Why use this?

React dev tools infer component names from the name of the function or class that defines the component. However, it does not work when anonymous functions are used.

This plugin fixes that by automatically generating the displayName property for assigned anonymous functions.

What does it do?

This plugin converts the following:

const Linebreak = React.memo(() => {
    return <br />;
});

const Img = function () {
    return <img />;
}

into:

const Linebreak = React.memo(function _Linebreak() {
  return <br />;
});
Linebreak.displayName = "Linebreak";

const Img = function () {
  return <img />;
};
Img.displayName = "Img";

Options

allowedCallees

Object.<string, string[]>, defaults to { "react": ["createContext"] }

Enables generation of displayNames for certain called functions.

{
  "plugins": ["@probablyup/babel-plugin-react-displayname", {
    "allowedCallees": {
      "react": ["createComponent"]
    }
  }]
}

Example

By default, with allowedCallees set to { "react": ["createContext"] }:

import React, { createContext } from 'react';
const FeatureContext = createContext();
const AnotherContext = React.createContext();

is transformed into:

import React, { createContext } from 'react';
const FeatureContext = createContext();
FeatureContext.displayName = "FeatureContext";
const AnotherContext = React.createContext();
AnotherContext.displayName = "AnotherContext";

template

Allows for rudimentary templating with the generated displayName. For example:

{
  "plugins": ["@probablyup/babel-plugin-react-displayname", {
    "template": "DS.%s",
  }]
}

Example

from:

const Linebreak = React.memo(() => {
    return <br />;
});

const Img = function () {
    return <img />;
}

to:

const Linebreak = React.memo(function _Linebreak() {
  return <br />;
});
Linebreak.displayName = "DS.Linebreak";

const Img = function () {
  return <img />;
};
Img.displayName = "DS.Img";