suitcx
It's like classnames
, but for SuitCSS components.
Example
// returns 'ChatMessage ChatMessage--unread'
// returns 'Button Button--colorPrimary Button--hollow
// returns 'Panel Panel--anchorTop is-active'
Parameters
parent
(string)
The base SuitCSS class name to use. For example, ChatMessage
or Modal-header
.
modifiers
(object, optional)
An optional object representing the SuitCSS modifiers to apply.
For each key/value pair of the object:
- if the value is a string, then the modifier applied will be composed of the key and value, camel-cased together,
- otherwise, if the value is truthy, then the key will be used as the modifier name.
For example, the following modifiers
parameter results in the modifiers, alignLeft
, colorDarkBlue
and hollow
to be applied:
align: 'left' color: 'darkBlue' hollow: true rounded: false
state
(object, optional)
An optional object representing the SuitCSS state to apply.
For each key/value pair of the object, if the value is truthy, then the key will be applied as the state.
For example, the following state
parameter results in the state is-active is-hovered
to be applied:
active: true hovered: true pressed: false