babel-plugin-jsx-classnames
babel plugin for automatically adding classnames()
to className
attribute.
transform
<div className=expression></div>
to
<div className=></div>
Why
classNames
In React, when you need to render conditionally classNames, you can write code like this:
<button className=` `></button>
classnames can help you write clear conditionally classNames:
<button
className={classNames({
'btn-active': active,
'btn-disabled': disabled,
})}>
</button>
babel-plugin-jsx-classnames
This babel plugin will keep you away from writing many classNames
, make the code clean and easy to read.
Usage
Install:
npm i babel-plugin-jsx-classnames --save-dev
Use plugin (example .babelrc):
Write your jsx:
<button className= 'btn-active': active 'btn-disabled': disabled ></button>
It will be transformed to:
<button className=></button>