easy-classname
this is a npm package to help u make classname easy
install with npm:
npm install classnames --save
Use with Node.js
; // => 'foo bar'
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.
; // => 'foo bar'; // => 'foo bar'; // => 'foo-bar'; // => ''; // => 'foo bar'; // => 'foo bar' // lots of arguments of various types; // => 'foo bar baz quux' // other falsy values are just ignored; // => 'bar 1'
Arrays will be recursively flattened as per the rules above:
var arr = 'b' c: true d: false ;; // => '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';;
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:
var Button = React;
You can express the conditional classes more simply as an object:
var classNames = ; var Button = React;
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 = ;