Wondering what’s next for npm?Check out our public roadmap! »

    dynamic-class-list

    1.1.0 • Public • Published

    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 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"

    Install

    npm i dynamic-class-list

    DownloadsWeekly Downloads

    303

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    73.9 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar