dynamic-class-list

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 cl = require('dynamic-class-list').cl;

OR using ES6 imports

import { cl } from 'dynamic-class-list';

API

Arguments as strings

// As Arguments
cl('class1', 'class2'); // Output ==> "class1 class2"

Arguments as an array of strings

cl(['class1', 'class2']); // Output ==> "class1 class2"

cl([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

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

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

Note that the function must return a boolean.

cl({
  class1: function () {
    return false;
  },
  class2: function () {
    return true;
  },
});

// Output ==> "class2"

Mixed Arguments Types

cl('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"

License

MIT © tusharf5