A tiny library to apply CSS classes as strings from objects
yarn add strclass strclass is an Universal Module, and can be used as a global, with AMD, CommonJS or ES Module.
Signature:
strclass({ className: booleanConditionToShowThisClass }, [defaultClass1, defaultclass2, ..., defaultclassN]) Usage:
import strclass from 'strclass' console.log(strclass({ highlighted: true })) // 'highlighted' console.log(strclass({ '-active': true }, 'button')) // 'button -active' console.log(strclass({ '-active': true }, 'button', 'button-default')) // 'button button-default -active' console.log(strclass({ active: false })) // ''You can use with React, VanillaJS or any other lib/framework:
const Button = ({ active, children }) => ( <button className={strclass({ active }, 'button')}> {children} </button> ) <Button active>Click!</Button> // will render: <button class="button active">Click!</button> <Button active={false}>Click!</Button> // will render: <button class="button">Click!</button>If you are using CSS Modules, or need to pass the class as a dynamic value, just do:
const ac = 'active' console.log(strclass({ [ac]: true })) // 'active'Differences from classnames module
Size
strclass has ~200bytes gzipped.
Signature
With classnames, you can pass any argument as String, Object or Array. Otherwise, strclass has a signature that should be respected: Object as a first argument, with the conditionals, and any other argument should be a String.
If you don't need conditionals, you don't need strclass. Just use strings.
That's it =)
MIT © Fernando Daciuk