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
classNamein 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"]
}]
}
}
}
5 Oct 28, 2022
6 Dec 15, 2022
10 Jan 3, 2023
12 Oct 20, 2022
162 Nov 17, 2022
587 Dec 30, 2022
645 Jan 2, 2023
67 Dec 8, 2022
34 Dec 9, 2022
9 Sep 3, 2022