$ yarn add @dimaslz/react-dynamic-classname
<ReactDynamicClassName>
<h1 d-classname={[
{ "class-a": true },
{ "class-b": false }
]}>
Test dynamic React class like Vue
</h1>
</ReactDynamicClassName>
ReactDynamicClassName
will have the attribute d-classname
for dynamic classes like Vueclass-a
when is true.<ReactDynamicClassName>
<h1 d-classname={{
"class-a": false,
"class-b": true
}}>
Test dynamic React class like Vue
</h1>
</ReactDynamicClassName>
ReactDynamicClassName
will have the attribute d-classname
for dynamic classes like Vueclass-b
when is true.<ReactDynamicClassName>
<h1 d-classname={[
{ "class-a": true, "class-b": false },
[{ "class-c": true, "class-d": false }]
]}>
Test dynamic React class like Vue
</h1>
</ReactDynamicClassName>
ReactDynamicClassName
will have the attribute d-classname
for dynamic classes like Vueclass-a
and class-c
when is true.<ReactDynamicClassName>
<div className="text-white">html element</div>
<DummyComponent />
</ReactDynamicClassName>
ReactDynamicClassName
will have the attribute d-classname
for dynamic classes like Vue but can still use native className
className
and a component.