react-class-name-resolver v0.0.2

Class Name Resolver

Provide className syntax like:

className={cn`base-class ${condition} ? if-true-class : if-false-class, other-base-class`}

Features:

• Resolving style module names:

cn`class1 class2`; // 'Component_class1__Hasd1 Component_class2__WQdaq'

• Multiline className definition
• Ternary operator

let i;
i = 6;
cn`${i > 5} ? class-yes : class-no`; // 'Component_class-yes__Adn1cq'
i = 4;
cn`${i > 5} ? class-yes : class-no`; // 'Component_class-no__Nhj13s'

• Shorten ternary operator

let i;
// Only if true ternary
i = 6;
cn`${i > 5} ? class-yes`; // 'Component_class-yes__Adn1cq'
i = 4;
cn`${i > 5} ? class-yes`; // ''
// Only if false ternary
i = 6;
cn`${i > 5} : class-no`; // ''
i = 4;
cn`${i > 5} : class-no`; // 'Component_class-no__Nhj13s'

• Ternary case can consist few classes

cn`${condition} ? class-yes-1 class-yes-2 : class-no-1 class-no-2`

Example

MyReactComponent.jsx

import styles from './MyReactComponent.module.scss';

import { classNameResolver } from 'react-class-name-resolver';
const cn = classNameResolver(styles);

const MyReactComponent = props => (
   <div className={cn`
      ${props.isError === true}
         ? text-red row
         : text-black,
      container 
      ${props.layout === 'column'} ? col, 
      ${props.theme === 'sunrise'} : row
   `}></div>
);

MyReactComponent.module.scss

.container {
   padding: 10px;
}
.row {
   display: flex;
}
.col {
   display: flex;
   flex-direction: column;
}
.text-red {
   color: red;
}
.text-black {
   color: black;
}