classname-js

className.JS

A JavaScript API for conditionally joining class names together.

Install

npm install --save-dev classname-js

Usage

Import className.JS

var className = require('classname-js');

In browser

To use className.JS in browser, just include className.js via <script> tag. The className method is attached to window.

Generate classNames

var className = require('classname-js');
className('foo', 'bar'); // 'foo bar'

Set classname of DOM elements

className.set(element, classnames...)

Set element's classname according to classnames spec.

• element: DOM element or CSS selector.
• classnames: Class names spec, same as regular className.

Example:

className.set('section .btn', 'btn', 'bar'); // all `section .btn` will become 'btn bar'

Supported types

className.js supports string, number, boolean, array, object, and even function.

For function:

• If the function returns true, the class name will be its corresponding property name, e.g.: {hide: function () {return true}} // => 'hide'
• If function returns a number greater than zero, the class name will be its corresponding property name, e.g.: {hide: function () {return 1}} // => 'hide'

For number:

If the number is greater than zero:

• when in an object, the class name will be its corresponding property name, e.g.: {hide: 1} // => 'hide'
• otherwise, the class name will simply be the number. e.g.: className(1) // => '1'

Below is a comprehensive example:

var className = require('classname-js');
className('btn', ['info', 'big'], {
        hide: function () {
            return btnElement.isActive ? true : false;
        },
        responsive: isResponsive || false
    });
 
// Suppose that `btnElement.isActive` and `isResponsive` are both true
// 'btn info big hide responsive'

License

MIT