This package purpose's is to reduce the complexity of creating dynamic class names. It's been used in a react environment so far but works in any other environment as well.
The following example demonstrates the use case within a react environment with TypeScript. Of course it works in plain JavaScript as well.
import * as React from 'react';
import { SFC } from 'react';
import { partial } from 'lodash/fp';
import { generateClassValue } from 'generate-class-value';
interface Props {
color: string;
}
const conditions: Conditions<Props> = {
'box__header': true,
'box__header--green': ({ color }) => color === 'green',
'box__header--black': ({ color }) => color === 'black',
};
// Reduces the cognitive load when reading the jsx code
const lazyClassValue = generateClassValue(conditions);
/**
* <Box color="green" />
*
* will produce:
*
* <div class="box__header box__header--green"></div>
**/
export const Box: SCF<Props> = props => (
<div className={lazyClassValue(props)}>
{/* ... */}
</div>
);