sui

suitcx

It's like classnames, but for SuitCSS components

Showing:

Popularity

Downloads/wk

1

GitHub Stars

1

Maintenance

Last Commit

5yrs ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

0.6KB

License

Unlicense

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100