util.classnames

A class to manage CSS classes in a react component

Installation

This module uses yarn to manage dependencies and run scripts for development.

To install as an application dependency:

$ yarn add --dev util.classnames

To build the app and run all tests:

$ yarn run all

Overview

Provides an ES6 class for managing CSS class names strings used in a react component. Strings are added to an instance and later retrieved using the classnames property. This property represents an concatenation of all active strings within the instance. The values within the class can be turned on and off to create different combinations. These strings can be used in the className property of a component.

Usage

Initialize with an array of strings

import {ClassNames} from 'util.classnames';
 
const clsn = new ClassNames(['a', 'b', 'c']);
 
// clsn.classnames => 'a b c'
 
clsn.add('d');
 
// clsn.classnames => 'a b c d'
 
clsn.remove('a');
 
// clsn.classnames => 'b c d'
 
clsn.off('b');
 
// clsn.classnames => 'c d'
 
clsn.on('b');
 
// clsn.classnames => 'b c d'
 
clsn.toggle('b');
 
// clsn.classnames => 'c d'
 
clsn.toggle('b');
 
// clsn.classnames => 'b c d'

Initialize with a string

import {ClassNames} from 'util.classnames';
 
const clsn = new ClassNames('a');
 
// clsn.classnames => 'a'

Initialize with an object

import {ClassNames} from 'util.classnames';
 
const clsn = new ClassNames({a: true, b: true, c: false});
 
// clsn.classnames => 'a b c'

API

attributes

• .classes
• .classnames
• .length
• .obj
• .size
• .str

methods

• add()
• clear()
• contains()
• delete()
• has()
• off()
• offIf()
• offIfElse()
• on()
• onIf()
• onIfElse()
• remove()
• reset()
• resetAll()
• toggle()
• update()