sindresorhus / class-names

Conditionally join CSS class names together - Especially useful with React

class-names

Conditionally join CSS class names together - Especially useful with React

Install

$ npm install @sindresorhus/class-names

Usage

import classNames from '@sindresorhus/class-names';

classNames('unicorn', 'rainbow');
//=> 'unicorn rainbow'

classNames({awesome: true, foo: false}, 'unicorn', {rainbow: false});
//=> 'awesome unicorn'

classNames('unicorn', null, undefined, 0, 1, {foo: null});
//=> 'unicorn'

const buttonType = 'main';
classNames({[`button-${buttonType}`]: true});
//=> 'button-main'

import classNames from '@sindresorhus/class-names';

const Button = props => {
	console.log(props);
	/*
	{
		type: 'success',
		small: true
	}
	*/

	const buttonClass = classNames(
		'button',
		{
			[`button-${props.type}`]: props.type,
			'button-block': props.block,
			'button-small': props.small
		}
	);

	console.log(buttonClass);
	//=> 'button button-success button-small'

	return <button className={buttonClass}>…</button>;
};

API

classNames(…input)

Conditionally join CSS class names together.

input

Type: string | object

Accepts a combination of strings and objects. When an object, only object keys with truthy values are included. Anything else is ignored.

FAQ

How is it different from classnames?

• Dedupes by default.
• Does not coerce numbers to strings.
• Does not support array input. Just use the spread operator.

Related

• react-extras - Useful components and utilities for working with React

class-names's Issues

Publish ES5 code to npm

I am aware that you as an individual don't usually do this since node is your primary target, however this is clearly a library for use in browsers, clearly for react, but yet cannot be used with create-react-app.

Here's the relevant part of their documentation: http://bit.ly/2tRViJ9

I'm happy to do the work and open a PR, I just want to make sure there's not an ideological reason blocking this functionality.

Noticable differences between two classnames packages

Hey there,

I've been following some of your packages for a good while. I've been using JedWatson/classnames as my classnames library.

It's interesting to see the differences between the two- for example Jed's allows an array.

Did you base yours off Jeb's? If not perhaps you might find it interesting to look at his source.