Classnames2

> This is a fork of classnames package with es6 exports and other stuff.

Versions of this package should be remained the same as original classnames.


A simple JavaScript utility for conditionally joining classNames together.

Installation

Install with npm, Bower, or Yarn:

npm:
``bash
npm install classnames2 --save
`

Yarn (note that yarn add automatically saves the package to the dependencies in package.json):
`bash
yarn add classnames2
`

Usage

$3

`js
import classNames from 'classnames2';
classNames('foo', 'bar'); // => 'foo bar'
`

$3

`js
const classNames = require('classnames2/es6/common');
// or
const classNames = require('classnames2/es5/common');
`

$3

`js
define('module', ['classnames2/es5/umd'], function (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 associated with a given key is falsy, that key won't be included in the output.

`javascript
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:

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

$3

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

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

$3

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 in React:

`js
var Button = React.createClass({
// ...
render () {
var btnClass = 'btn';
if (this.state.isPressed) btnClass += ' btn-pressed';
else if (this.state.isHovered) btnClass += ' btn-over';
return

{this.props.label};
}
});
`

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

`js
var classNames = require('classnames');

var Button = React.createClass({
// ...
render () {
var btnClass = classNames({
btn: true,
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
return {this.props.label};
}
});
`

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:

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


$3

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:

`js
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