cla

classnames

A simple javascript utility for conditionally joining classNames together

Showing:

Popularity

Downloads/wk

8.5M

GitHub Stars

14.6K

Maintenance

Last Commit

2mos ago

Contributors

50

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Reviews

Average Rating

4.6/523
Read All Reviews
ksorv
s-r-aman
nikhil2882
rajrgb
Shyama-Behera
bvego
preveenraj

Top Feedback

19Easy to Use
12Great Documentation
5Performant
3Highly Customizable
2Bleeding Edge
1Responsive Maintainers

Readme

Classnames

NPM version Node.js CI NPM Weekly Downloads License Supported by Thinkmill

A simple JavaScript utility for conditionally joining classNames together.

Install with npm, Bower, or Yarn:

# via npm
npm install classnames

# via Bower
bower install classnames

# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add classnames

Use with Node.js, Browserify, or webpack:

var classNames = require('classnames');
classNames('foo', 'bar'); // => 'foo bar'

Alternatively, you can simply include index.js on your page with a standalone <script> tag and it will export a global classNames method, or define the module if you are using RequireJS.

Project philosophy

We take the stability and performance of this package seriously, because it is run millions of times a day in browsers all around the world. Updates are thoroughly reviewed for performance impacts before being released, and we have a comprehensive test suite.

Classnames follows the SemVer standard for versioning.

There is also a Changelog.

Usage

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 associated with a given key is falsy, that key won't be included in the output.

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'

Arrays will be recursively flattened as per the rules above:

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

Dynamic class names with ES2015

If you're in an environment that supports computed keys (available in ES2015 and Babel) you can use dynamic class names:

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });

Usage with React.js

This package is the official replacement for classSet, which was originally shipped in the React.js Addons bundle.

One of its primary use cases is to make dynamic and conditional className props simpler to work with (especially more so than conditional string manipulation). So where you may have the following code to generate a className prop for a <button> in React:

class Button extends React.Component {
  // ...
  render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

You can express the conditional classes more simply as an object:

var classNames = require('classnames');

class Button extends React.Component {
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

Because you can mix together object, array and string arguments, supporting optional className props is also simpler as only truthy arguments get included in the result:

var btnClass = classNames('btn', this.props.className, {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

Alternate dedupe version

There is an alternate version of classNames available which correctly dedupes classes and ensures that falsy classes specified in later arguments are excluded from the result set.

This version is slower (about 5x) so it is offered as an opt-in.

To use the dedupe version with Node.js, Browserify, or webpack:

var classNames = require('classnames/dedupe');

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

For standalone (global / AMD) use, include dedupe.js in a <script> tag on your page.

Alternate bind version (for css-modules)

If you are using css-modules, or a similar approach to abstract class "names" and the real className values that are actually output to the DOM, you may want to use the bind variant.

Note that in ES2015 environments, it may be better to use the "dynamic class names" approach documented above.

var classNames = require('classnames/bind');

var styles = {
  foo: 'abc',
  bar: 'def',
  baz: 'xyz'
};

var cx = classNames.bind(styles);

var className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz"

Real-world example:

/* components/submit-button.js */
import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';

let cx = classNames.bind(styles);

export default class SubmitButton extends Component {
  render () {
    let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
    let className = cx({
      base: true,
      inProgress: this.props.store.submissionInProgress,
      error: this.props.store.errorOccurred,
      disabled: this.props.form.valid,
    });
    return <button className={className}>{text}</button>;
  }
};

Polyfills needed to support older browsers

classNames >=2.0.0

Array.isArray: see MDN for details about unsupported older browsers (e.g. <= IE8) and a simple polyfill.

LICENSE MIT

Copyright (c) 2018 Jed Watson. Copyright of the Typescript bindings are respective of each contributor listed in the definition file.

Rate & Review

Great Documentation12
Easy to Use19
Performant5
Highly Customizable3
Bleeding Edge2
Responsive Maintainers1
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned1
Unwelcoming Community0
100
Saurav KhdooliaGurugram, India88 Ratings81 Reviews
On way to be : )
2 months ago
Easy to Use
Great Documentation
Performant

Classnames is a very useful package, It was really nice to use it. I wanted to create some components that allowed themes, for that i needed to merge multiple classes, with multiple conditions handling those. Initially I was simply using `{a ? c : d}` but it became a mess really quickly. So, I used this lib there, And you won't believe me how easy it became to merge styles with conditions everywhere. 10/10 you should use this if you want something around that feature.


0
SR AmanNew Delhi, India88 Ratings93 Reviews
Trying new things.
2 months ago
Easy to Use
Highly Customizable
Bleeding Edge
Responsive Maintainers
Performant
Great Documentation

I dont know how I ever lived without this utility. Very intuitive api and a simple library, reduces your work by 10x. I was doing ternary operators left and right, but after getting used to this. I hate to write classes in react without this. The dev team pulled of very good api. There is nothing much to say about this, the booleans are just done right.


0
nikhil288248 Ratings56 Reviews
8 months ago
Great Documentation
Easy to Use

this module just combines two or more class names into a single string. useful for those who use CSS in js like techniques. but to be frank you can easily write your own solution in a matter of minutes. I use this package in production but never use it in any side project or personal projects


0
rajrgb38 Ratings60 Reviews
FullStack Web Developer MERN Stack, SQL, C/C++
4 months ago

Working with class becomes simple with this tool. I came to know about this 3 months ago when I was using a lot of classes for styling and then I serached for a tool that can help in naming so it basically joins two classes to form a single class name, which is its most important feature.


0
Shyama-Behera54 Ratings59 Reviews
3 months ago

It is incredibly small and simple. I use this in my projects as it allows me to easily combine different class names together conditionally to make one single class name for my different HTML elements. It is really helpful in any library that has a lot of front-end manipulation.


0

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial