astro-classname

astro-classname

A small and powerful package which can help you change or add classnames quickly and easily

install

npm:

npm install astro-classname

yarn:

yarn add astro-classname

Usage

You can set anything to the classname，but the value that was associated with a given key is falsy， it will not be effective。Object has the highest priority

Before you use，you should require or import the package

You can also add classname to dom directly

classname('tom', 'bob'); // tom bob
classname('tom', { bob: true }); // tom bob
classname('tom', { bob: false }); // tom
classname({ 'tom-bob': true }); // tom-bob
classname({ tom: false }, { bob: true }); // bob
classname({ tom: false, 'bob': true }); // bob
 
classname('tom', { bob: false }, 'lili', undefined, 0, 1, null, { hey: 0 }, '') // tom lili 0 1

Usage with react!

import cn from 'astro-classname';
 
classname('button', {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
})

Usage with jquery!

classname($('btn'), 'tom', 'bob');
classname(document.getElementById('btn'), { tom: true });

You can use all the methods in anywhere