This plugin reduces boilerplate when working with conditional classes/css modules, while being fully compatible with plain old className
In
const Hr = ({ bold }) => {
return <hr classNames={['hr', 'solid', bold && 'bold', cssModule.someClass]} />;
};
Out
const Hr = ({ bold }) => {
return <hr className={`hr solid ${bold && 'bold' || ""} ${cssModule.someClass}`} />;
};
npm install --save-dev babel-plugin-transform-react-class-names
{
"plugins": ["babel-plugin-transform-react-class-names"]
}
babel --plugins babel-plugin-transform-react-class-names script.js
require("@babel/core").transform("code", {
plugins: ["babel-plugin-transform-react-class-names"]
});