Skip to content

tusharf5/dynamic-class-list

Repository files navigation

css class conditional react dynamic

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

About

Simple, fast module for extracting strings of dynamic and optional class list.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •