component-classes

What is component-classes?

The component-classes npm package is a utility for managing CSS classes on DOM elements. It provides a simple API to add, remove, and toggle classes, making it easier to manipulate class lists without directly interacting with the DOM's classList property.

What are component-classes's main functionalities?

Add Class

This feature allows you to add a new class to a DOM element. The code sample demonstrates how to create a new div element and add a class named 'new-class' to it.

const classes = require('component-classes');
const el = document.createElement('div');
classes(el).add('new-class');

Remove Class

This feature allows you to remove an existing class from a DOM element. The code sample shows how to remove the class 'existing-class' from a div element.

const classes = require('component-classes');
const el = document.createElement('div');
el.className = 'existing-class';
classes(el).remove('existing-class');

Toggle Class

This feature allows you to toggle a class on a DOM element. The code sample demonstrates how to toggle the class 'toggle-class' on a div element.

const classes = require('component-classes');
const el = document.createElement('div');
classes(el).toggle('toggle-class');

Check Class

This feature allows you to check if a DOM element has a specific class. The code sample shows how to check if the class 'check-class' is present on a div element.

const classes = require('component-classes');
const el = document.createElement('div');
el.className = 'check-class';
const hasClass = classes(el).has('check-class');

Other packages similar to component-classes

classnames

The classnames package is a utility for conditionally joining class names together. It is more focused on dynamically generating class names based on conditions, whereas component-classes is more about directly manipulating the class list of DOM elements.

dom-helpers

The dom-helpers package provides a collection of DOM utility functions, including class manipulation. It offers a broader range of DOM-related utilities compared to component-classes, which is specifically focused on class management.

add-class

The add-class package is a simple utility for adding classes to DOM elements. It is similar to component-classes but with a more limited scope, focusing only on adding classes.

README

classes

Cross-browser element class manipulation, utilizing the native .classList when possible. This is not designed to be a .classList polyfill.

Installation

$ component install component/classes

Example

var classes = require('classes');
classes(el)
  .add('foo')
  .toggle('bar')
  .remove(/^item-\d+/);

API

.add(class)

Add class.

.remove(class)

Remove class name or all classes matching the given regular expression.

.toggle(class)

Toggle class.

.has(class)

Check if class is present.

.array()

Return an array of classes.

Test

$ make test

License

MIT