dynamic-class-list

A tiny, no-dependency library for creating conditional css classes.

Features:

• Support string arguments.
• Support number arguments.
• Support object arguments.
• Support array arguments.
• Support function arguments.
• No dependency.

Quickstart - CommonJS

npm install dynamic-class-list

Or using yarn

yarn add dynamic-class-list

Then require it in your module ...

var getClassNames = require('dynamic-class-list').getClassNames; // deprecated
var classList = require('dynamic-class-list').classList;

OR using ES6 imports

import { getClassNames, classList } from 'dynamic-class-list';

Note that getClassNames is deprecated and will be removed in next major release. You should use classList moving forward.

API

Arguments as strings

 
// As Arguments
getClassNames('class1', 'class2'); // Output ==> "class1 class2"
// OR
classList('class1', 'class2'); // Output ==> "class1 class2"

Arguments as an array of strings

classList(['class1', 'class2']); // Output ==> "class1 class2"
 
classList([null, undefined, 3, 'class1', 'class2']); // Output ==> "3 class1 class2"

Arguments as an object

Note that the key is used as the class if its value is truthy

classList({class1: true, class2 : false}); // Output ==> "class1"
 
classList({class1: undefined, class2 : null, class3: true, class4: false}); // Output ==> "class3"

Note that the function must return a boolean.

classList({ 
  class1: function() { return false; },
  class2 : function() { return true; }
});
 
// Output ==> "class2"

Hybrid Arguments

classList('class1', 'class2', 2, null, undefined, ['class3', null, undefined, 4, 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; },
    class7: undefined,
    class8: true,
    class9: false
});
 
// Output ==> "class1 class2 2 class3 4 class4 class6 class8"