What is classnames?
The classnames package is a simple utility for conditionally joining class names together. It is commonly used in React projects but can be used anywhere that requires dynamic class name computation.
What are classnames's main functionalities?
String arguments
Combine multiple string arguments into one class name.
classnames('foo', 'bar'); // 'foo bar'
Object arguments
Use an object to include class names conditionally based on the truthiness of the object's values.
classnames({ 'foo': true, 'bar': false }); // 'foo'
Array arguments
Pass an array of class names which will be joined together.
classnames(['foo', 'bar']); // 'foo bar'
Mixed arguments
Combine string, object, and array arguments to form a class name string.
classnames('foo', { 'bar': true, 'duck': false }, ['baz', { 'quux': true }]); // 'foo bar baz quux'
Other packages similar to classnames
clsx
clsx is a tiny utility for constructing className strings conditionally. It is similar to classnames but is smaller and faster, making it a popular alternative.
emotion
Emotion is a performant and flexible CSS-in-JS library. While it is more than a class name utility, it provides similar functionalities in terms of composing and applying class names conditionally.
Classnames
A simple javascript utility for conditionally joining classNames together.
Install with npm, or download the UMD version (provides window.classnames, or defines the AMD modules 'classnames').
npm install classnames
The classnames
function takes any number of arguments which can be a string or object.
The argument 'foo'
is short for {foo: true}
. If the value of the key is falsy, it won't be included in the output.
classnames('foo', 'bar');
classnames('foo', {bar: true});
classnames({foo: true}, {bar: true});
classnames({foo: true, bar: true});
classnames('foo', {bar: true, duck: false}, 'baz', {quux: true})
classnames(null, false, 'bar', undefined, 0, {baz: null}, '');
var array = ['foo', {bar: true}];
classnames.apply(null, array);