suitcx

It's like classnames, but for SuitCSS components.

Example

// returns 'ChatMessage ChatMessage--unread'
suitcx('ChatMessage', { unread: true })

// returns 'Button Button--colorPrimary Button--hollow
suitcx('Button', { color: 'primary', hollow: true })

// returns 'Panel Panel--anchorTop is-active'
suitcx('Panel', { anchor: 'top' }, { active: true })

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
}