Have ideas to improve npm?Join in the discussion! »

classifizer
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

classifizer

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

NPM JavaScript Style Guide

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

Install

npm i classifizer

DownloadsWeekly Downloads

3

Version

1.1.2

License

MIT

Unpacked Size

114 kB

Total Files

51

Last publish

Collaborators

  • avatar