Skip to content

Add the `className` to all JSX elements in your project

License

Notifications You must be signed in to change notification settings

Xinhe998/babel-plugin-add-jsx-classes

Repository files navigation

Babel Plugin Transform JSX Classes

This babel plugin adds the className in each JSX element.

Before After
function FancyComponent () {
  return (
    <div>
      <div>Hello World</div>
    </div>
  )
}
      
function FancyComponent () {
  return (
    <div className='example'>
      <div className='example'>Hello World</div>
    </div>
  )
}
      

This plugin asumes that you are using React and Babel as a building tool to generate your bundle.

Features

  • Adds the className in each JSX element in your project.
  • Supports styled-components.

Install

Via npm:

  npm install --save-dev babel-plugin-add-jsx-classes

Via Yarn:

  yarn add -D babel-plugin-add-jsx-classes

Usage

Inside .babelrc:

{
  "presets": ["react"],
  "env": {
    "dev": {
      "plugins": ["add-jsx-classes", {
        "className": "example"
      }]
    }
  }
}

You can use array or string to specify the className, inside your babelrc:

{
  "presets": ["react"],
  "env": {
    "dev": {
      "plugins": ["add-jsx-classes", {
        "className": ["example", "example-2"]
      }]
    }
  }
}