JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16
  • Score
    100M100P100Q65042F
  • License MIT

CSS classes builder & CSS-modules stylizer

Package Exports

  • classifizer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (classifizer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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