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"]
      }]
    }
  }
}