Next Phenomenal Microbrewery

    classlist-helper

    1.1.4 • Public • Published

    classList Helper

    Codacy Badge

    An Element.classList method helper function that can be curried for functional programing.

    Example

    Task: Add the class active to all list elements.

    <ul>
      <li class="item">item</li>
      <li class="item">item</li>
      <li class="item">item</li>
      <li class="item">item</li>
    </ul>

    Setup:

    // import various libs
    import { map, curry } from 'lodash';
    let classListHelper = require('classlist-helper');
    
    // Get the list of elements that you want to change
    let nodeList = document.querySelectorAll('.item'); // 4 html elements

    Usage:

    // Create Active method with classListHelper.
    let setActive = curry(classlistHelper)('active')('add');
    
    // Set all elements to Active.
    map(nodeList, setActive);

    After running this, the html will look like:

    <ul>
      <li class="item active">item</li>
      <li class="item active">item</li>
      <li class="item active">item</li>
      <li class="item active">item</li>
    </ul>

    Other example methods

    // Remove a Class
    let setInActive = curry(classlistHelper)('active')('remove');
    
    // Add a Class
    let setActive = curry(classlistHelper)('active')('add');
    
    // Toggle a class 
    let toggleActive = curry(classlistHelper)('active')('toggle');
    
    // Add multiple classes / Pass an Array
    let setMultiple = curry(classlistHelper)(['active','updated'])('add');
    
    // Test all elements in an Array for a class
    let anyActive = curry(classlistHelper)('active')('contains');
    
    // Replace a class with another.
    let setInactive = curry(classlistHelper)(['active', 'inactive'])('replace');

    Note: For more examples please check the unit tests.

    Install

    npm i classlist-helper

    DownloadsWeekly Downloads

    32

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • etoxin