@kifs-common/classnames

React-Context-Reducer

Lightweight – no dependencies – functions helper to handle classnames.

Install

• npm i @kifs-common/classnames

Usage

import { join, } from '@kifs-common/classnames'

console.log(join())
// -> undefined

console.log(join('hello', 'world'))
// -> "hello world"

const hero = {
  firstname: 'Gerard',
  lastname: 'Pichon'
}
console.log(join(obj.firstname, obj.age, false, !obj.age && obj.lastname))
// -> "Gerard Pichon"

This is pretty usefull in a css-module context like:

import { join, } from '@kifs-common/classnames'

import style from 'style.css'

function createButton (color, disabled) {
  const button = document.createElement('button')
  button.className = join(style.button, style[color || 'primary'], disabled && style.disabled)
  return button
}

// Or JSX/react

function renderButton (color, disabled) {
  return (
    <button
      className={join(
        style.button,
        style[color || 'primary'],
        disabled && style.disabled
      )}>
    </button>
  )
}