Babel Plugin: React Auto Display Name A Babel plugin that automatically adds a displayName property to React components created with arrow functions or function expressions, making debugging in React DevTools much easier.

The Problem When you create a React component as a variable (e.g., const MyComponent = () => ...), the React DevTools often can't figure out its name and displays it as . In a complex component tree, this makes it very difficult to identify which component is which, slowing down your debugging process.

The Solution This Babel plugin automatically finds these component definitions at build time and injects a displayName property.

Your code (before):

const MyButton = () => { return Click Me!; };

This component would appear as in the DevTools.

What Babel outputs (after):

const MyButton = () => { return Click Me!; }; MyButton.displayName = "MyButton";

Now, this component will correctly appear as in the DevTools! The plugin is smart enough to only target capitalized variables (the React convention) that are assigned a function.

Installation npm install --save-dev @your-username/babel-plugin-react-auto-display-name

Usage In your Babel configuration file (babel.config.js or .babelrc), add the plugin to your plugins array.

// babel.config.js module.exports = { presets: [ // ... your other presets, like '@babel/preset-react' ], plugins: [ '@your-username/babel-plugin-react-auto-display-name', // ... your other plugins ], };