babel-plugin-react-component-auto-labeler

A Babel plugin that automatically adds a data-component-name attribute to the top-level JSX element of your React function components — ideal for debugging, testing, or traceability in devtools.

Supports Vite, Next.js, and any toolchain that uses Babel.

✨ Features

• Adds data-component-name="MyComponent" automatically
• No manual annotation required
• Zero-op in production if disabled
• Useful for visual debugging and test selectors

⚒️ Installation

npm install --save-dev babel-plugin-react-component-auto-labeler

Or with Yarn:

yarn add -D babel-plugin-react-component-auto-labeler

🔧 Setup

➤ Vite (with @vitejs/plugin-react)

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import autoLabeler from "babel-plugin-react-component-auto-labeler";

export default defineConfig(({ mode }) => {
  const isDev = mode === "development";

  return {
    plugins: [
      react({
        babel: {
          plugins: [[autoLabeler, { enabled: isDev }]],
        },
      }),
    ],
  };
});

Make sure your plugin is compiled as ESM and your project uses "type": "module" in package.json.

🏷️ What it does

✅ Input:

export const MyCard = () => <section className="card">Hello</section>;

✅ Output (after plugin runs):

<section class="card" data-component-name="MyCard">
  Hello
</section>

Example

If you have the following component:

export const TestButton = ({ text }: { text: string }) => {
  return <button>{text}</button>;
};

And you look into the DOM, it will show something like this:

Now, this can be easily mitigated by using React Dev Tools, which will give you the component name. But, if you don't want to swap between the two debug-views, this plugin, once setup as described above, will show the following:

(Notice how both the app div and the button now shows their names.)

⚙️ Options

| Option | Type | Default | Description | | --------------- | ------- | ----------------------- | -------------------------------------------------- | | enabled | boolean | true | Enables/disables the plugin (e.g., in production) | | attributeName | string | "data-component-name" | The name of the attribute to add on each component |

You can disable it dynamically:

[autoLabeler, { enabled: process.env.NODE_ENV === "development" }];

Development

If you want to help me add features or fix a bug, you just:

• get the code from github
• install the dependencies (npm i)
• Make your changes
• Build the package (npm run build)
• (optional) Package the package (npm pack) and test it in another project locally (npm install ../path/to/package)
• Put up a PR with your changes
  • Avoid cursing, personal attacks, hate crimes and/or public support of the Dutch in your description
• Get a good review and get it merged

🌍 Use cases

• Quickly identify components in browser devtools
• Add selectors for E2E/integration testing ([data-component-name="MyButton"])
• Track usage of shared or critical components
• Build your own dev tools / analytics

📜 License

MIT © Morkalork