Package Exports

dynamic-class-list
dynamic-class-list/dist/index.esm.js
dynamic-class-list/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dynamic-class-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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"