https://github.com/etoxin/classlist-helper
A classHelper function that can be curried.
https://github.com/etoxin/classlist-helper
classlist
Last synced: 9 days ago
JSON representation
A classHelper function that can be curried.
- Host: GitHub
- URL: https://github.com/etoxin/classlist-helper
- Owner: etoxin
- License: mit
- Created: 2017-12-11T02:00:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T00:17:17.000Z (over 3 years ago)
- Last Synced: 2025-08-09T03:21:21.560Z (10 months ago)
- Topics: classlist
- Language: JavaScript
- Size: 394 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# classList Helper
[](https://app.codacy.com/app/etoxin/classlist-helper?utm_source=github.com&utm_medium=referral&utm_content=etoxin/classlist-helper&utm_campaign=Badge_Grade_Dashboard)
An Element.classList method helper function that can be curried for functional programing.
### Example
*Task*: Add the class `active` to all list elements.
```html
- item
- item
- item
- item
```
Setup:
```js
// 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:
```js
// 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:
```html
- item
- item
- item
- item
```
# Other example methods
```js
// 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.