Classnames Miny

An API compabile version of classnames with a massively reduced bundle size, 800b -> 178b.

npm install @nnilky/classnames-miny

Usage

classNames supports any number of arguments and contactoates them into a classname

If it's a falsey value, it's ignored. So you can do this:

classNames(isHidden && "hidden opacity-0")

If it's an array, it's concatenated, So you can do this:

let classes = []
if (isHidden) {
    classes.push("hidden")
    classes.push("opacity-0")
}
classNames(classes)

If it's an object, only keys with truth values are appended

classNames({
    "hidden opacity-0": false,
})

Examples

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

import React, { useState } from 'react';
import classNames from 'classnames';

export default function Button (props) {
	const { disabled } = props

	return (
		<button
			className={classNames(
                "bg-white text-lg px-y py-2 duration-300",
                disabled ? 'border-neutral-400' : "border-neutral-700",
            )}
        >
			{props.label}
		</button>
	);
}