babel-plugin-react-append-displayname

1.0.2 • Public • Published

babel-plugin-react-append-displayName

Add component name as a className of first component in the render tree.

Description

When using Atomic components like Box, Button etc with styledComponents the classNames usually have the atomic component name which creates a hard to debug DOM tree.

function UserPanel({ name }) {
  return (
    <Box padding="medium">
      <h1>Hello ${name}</h1>
    </Box>
  )
}

This component will render div with class Box-sc-* which is not helpful. This plugin will append UserPanel to class.

Getting Started

Installing

First, install the plugin via npm or yarn:

npm install --save-dev babel-plugin-react-append-displayname

Configuration in .babelrc or babel.config.js

{
  "plugins": [
    "@babel/preset-react",
    [
      "babel-plugin-react-append-displayname",
      {
        "components": ["Box", "Button"],
        "parentsToExclude": ["Box", "Button"]
      }
    ]
  ]
}
  • components: the list of components which when appears first in the tree will get the display name of parent appended as className
  • parentsToExclude: list of comnponents to be ignored when present as parent.

Acknowledgments

Chat GPT

Package Sidebar

Install

npm i babel-plugin-react-append-displayname

Weekly Downloads

5

Version

1.0.2

License

none

Unpacked Size

11 kB

Total Files

14

Last publish

Collaborators

  • sabarni.d