class-names – Conditionally join CSS class names together

One of the packages I’ve been using a lot is classnames, a simple JavaScript utility for conditionally joining classNames together. Recently I stumbled upon @sindresorhus/class-names, a likewise package whose usage is very similar.

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

// Think of these like props of your React component …
const props = {
	type: 'success',
	small: true
};

classNames(
	'button',
	`button-${props.type}`
	{
		'button-block': props.block,
		'button-small': props.small
	}
);
//=> 'button button-success button-small'

Why bother to switch then? As per FAQ:

How is it different from classnames?

  • Dedupes by default.
  • Doesn’t coerce numbers to strings.
  • Doesn’t support array input. Just use the spread operator.

Worth a shot I guess …

Installation per npm

npm install @sindresorhus/class-names

@sindrehorus/class-names Source (GitHub) →
The original classnames package →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.