classifizer

Build complex conditional classes and stylize them with injected css-modules

Install

npm install --save classifizer

or

yarn add classifizer

Usage

classes

A function that accepts strings, arrays, objects. Omits empty strings, null and undefined.

import React from 'react'
import { classes } from 'classifizer';

export function Example({ isChecked }) {
  const isChecked = true;

  return (
    <>
      // <div class="checkbox checkbox_active">
      <div className={classes('checkbox', isChecked && 'checkbox_active')} />

      // <div class="checkbox__checker checkbox__checker_active">
      <div className={classes({ checkbox: { elem: { checker: { mod: { active: isChecked } } } } })} />

      // <div class="checkbox checkbox_active">
      <div className={classes({ checkbox: { mod: { active: isChecked } } })} />

      // <div class="checkbox_active">
      <div className={classes({ checkbox: { use: false, mod: { active: isChecked } } })} />
    </>
  );
}

styledClasses

Before a list of class drafts accepts a cssModule object

import React from 'react'
import { styledClasses } from 'classifizer';

import * as styles from './Example.css';

export function Example({ isChecked }) {
  return (
    // <div class="Example__checkbox___Q9Xfp Example__checkbox_active___7qjkJ">
    <div className={styledClasses(styles, 'checkbox', isChecked && 'checkbox_active')}>
  );
}

classesStylizer

Allows to inject a cssModule object to the classes function

import React from 'react'
import { classesStylizer } from 'classifizer';

import * as styles from './Example.css';

const stylizeClasses = classesStylizer(styles);

export function Example({ isChecked }) {
  return (
    <div className={stylizeClasses({ checkbox: { mod: { active: isChecked } } })}>
  );
}

stringStylizer

Allows to stylize a list of classes in one string

import React from 'react'
import { stringStylizer } from 'classifizer';

import * as styles from './Example.css';

const stylizeString = stringStylizer(styles);

export function Example({ isChecked }) {
  return (
    <>
      // <div class="Example__checkbox___Q9Xfp Example__checkbox_active___7qjkJ">
      <div className={stylizeString(classes('checkbox', isChecked && 'checkbox_active'))}>

      // <div class="Example__checkbox___Q9Xfp Example__checkbox_active___7qjkJ">
      <div className={stylizeString('checkbox checkbox_active')}>
    </>
  );
}

More examples of using inner classBuilder you can find in tests

License

MIT © sam0sva1