react dynamic classname

$ yarn add @dimaslz/react-dynamic-classname

Code example (by array of object)

<ReactDynamicClassName>
  <h1 d-classname={[
    { "class-a": true },
    { "class-b": false }
  ]}>
    Test dynamic React class like Vue
  </h1>
</ReactDynamicClassName>
All components inside ReactDynamicClassName will have the attribute d-classname for dynamic classes like Vue

Code result

Test dynamic React class like Vue

Here the result where is rendered the text in red according with the class-a when is true.

Code example (by object)

<ReactDynamicClassName>
  <h1 d-classname={{
    "class-a": false,
    "class-b": true
  }}>
    Test dynamic React class like Vue
  </h1>
</ReactDynamicClassName>
All components inside ReactDynamicClassName will have the attribute d-classname for dynamic classes like Vue

Code result

Test dynamic React class like Vue

Here the result where is rendered the text in red according with the class-b when is true.

Code example (by array of arrays and objects)

<ReactDynamicClassName>
  <h1 d-classname={[
    { "class-a": true, "class-b": false },
    [{ "class-c": true, "class-d": false }]
  ]}>
    Test dynamic React class like Vue
  </h1>
</ReactDynamicClassName>
All components inside ReactDynamicClassName will have the attribute d-classname for dynamic classes like Vue

Code result

Test dynamic React class like Vue

Here the result where is rendered the text in red according with the class-a and class-c when is true.

Code example with components as children

<ReactDynamicClassName>
	<div className="text-white">html element</div>
	<DummyComponent />
</ReactDynamicClassName>
All components inside ReactDynamicClassName will have the attribute d-classname for dynamic classes like Vue but can still use native className

Code result

html element

Test dynamic React class like Vue

Here the result where is rendered the common html element with native className and a component.