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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent