classNames

A tiny (228 bytes) utility for constructing className strings conditionally.

Also serves as a faster & smaller drop-in replacement for the classnames module.

API

function classNames(...classes: ClassValue[]): string;

Usage

import { classNames } from '@feedzai/js-utilities';

// Strings (variadic)
classNames('foo', true && 'bar', 'baz');
// 'foo bar baz'

// Objects
classNames({ foo:true, bar:false, baz:isTrue() });
// 'foo baz'

// Objects (variadic)
classNames({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
// 'foo --foobar'

// Arrays
classNames(['foo', 0, false, 'bar']);
// 'foo bar'

// Arrays (variadic)
classNames(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
// 'foo bar baz hello there'

// Kitchen sink (with nesting)
classNames('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
// 'foo bar hello world cya'

// Dynamic classnames with computed keys
const btnType = "primary";
classNames({ [`btn-${btnType}`]: true });
// 'btn-primary'