Simple class names utility. The best dependency is no dependency :)

Disclaimer

I believe that:

• We don't need a dependency for simple functions like the class names
• 99% of the time a simple form of a class names function is enough
• Allocating memory for a short-lived object just to use classes is overkill

Installation

Recommended

Copy-paste the code to your lib/cn.ts or utils/cn.ts. You don't need this dependency.

export function cn(a?: any, b?: any, c?: any, d?: any, e?: any){
    let result = ''

    if (a) result += a
    if (b) result += ' ' + b
    if (c) result += ' ' + c
    if (d) result += ' ' + d
    if (e) result += ' ' + e

    return result
}

export const cnkv: (...args: any[]) => string = function() {
    let i = 0, len = arguments.length, result = ''
    for (; i < len; i += 2) {
        if (arguments[i+1]) {
            result += ' ' + arguments[i]
        }
    }

    return result
}

Package Manager (not recommended)

# npm
npm i --save-dev no-classnames

# pnpm
pnpm add --save-deev no-classnames

# yarn
yarn add --save-deev no-classnames

Usage

cn joins truthy arguments.

cnkv takes (className, condition) pairs and appends each class whose condition is truthy. It stands for Class Names Key Value

import { cn, cnkv } from 'no-classnames'

// cn — join static and conditional classes
const btnClass = cn('btn-base', isFocused && 'btn-focused')
// isFocused=true  → 'btn-base btn-focused'
// isFocused=false → 'btn-base'

// cnkv — key-value pairs (class, condition)
const spinnerClass = cnkv(
    'btn-disabled', disabled || loading,
    'spinner',      loading,
)
// disabled=false, loading=true  → 'btn-disabled spinner'
// disabled=false, loading=false → ''

// combining both
const inputClass = cn(
    'input-base',
    cnkv(
        'input-error',   hasError,
        'input-success', isValid,
    ),
)
// hasError=true  → 'input-base input-error'
// isValid=true   → 'input-base input-success'