Neoanthropic Preternatural Murmurings

classlist-helper

1.1.2 • Public • Published

classList Helper

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

0

version

1.1.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability