Kod źródłowy: https://github.com/szkola-reacta/materialy-classnames

Dokumentacja: https://github.com/JedWatson/classnames

Instalacja

npm install classnames

Wykorzystanie

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 typesclassNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'// other falsy values are just ignoredclassNames(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  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

{this.props.label}; } }

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{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:

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