z-modifier

Handles BEM-inspired modifier classes on a DOM element.

Usage no npm install needed!

<script type="module">
  import zModifier from 'https://cdn.skypack.dev/z-modifier';
</script>

README

z-modifier

Build Status npm version

This module was written to handle modifier classes inspired by the BEM methodology.

Since it's a CommonJS module, it must be used alongside with Browserify, or something similar, like WebPacker.

Example, explanation

<div id="module"></div>
var Modifier = require('z-modifier');

var mod = new Modifier(
    $('#module'),
    'module'. // The base class the modifier string will be attached to
    '--', // Modifier separator, optional
    '_' // Value separator, optional
);

mod.on('modifier');
// -> Adds the "module--modifier" class
mod.get('modifier');
// -> true

mod.set('modifier', 'value');
// -> Replaces the "module--modifier" class with "module--modifier_value".
mod.get('modifier');
// -> 'value'

mod.off('modifier');
// Removes the "module--modifier_value" class.
mod.get('modifier');
// -> false

mod.toggle('modifier');
// -> Adds the "module--modifier" class.
mod.toggle('modifier');
// -> Removes the "module--modifier" class.

License

MIT