#DOM

DOM class and style helpers.

#classNames

Join conditional class names — strings, arrays, and { className: condition } objects.

import { classNames } from '@cc-heart/utils-client'

classNames('btn', ['btn-lg'], { 'is-active': true, 'is-hidden': false })
// 'btn btn-lg is-active'

#addClassName / removeClassName

Add or remove classes on an element.

addClassName(el, 'is-active')
removeClassName(el, 'is-active')

#addStyles / removeStyles / getStyles

Inline style helpers.

addStyles(el, { color: 'red', fontSize: '14px' })
removeStyles(el, ['color'])
getStyles(el, 'font-size') // '14px'

#getPadding

Read the computed padding of an element as numbers.

getPadding(el) // { left: 0, right: 0, top: 8, bottom: 8 }

#isHidden

Whether an element (or its content) takes no visible space.

isHidden(el) // boolean

#Demo

Toggle the conditions and see classNames build the class string, then apply it live to the box: