Generate an HTML class attribute string... however you want.
Takes in a series of inputs to build a single class string. Different types of inputs are handled differently.
Input Type | Handling |
---|---|
string |
adds the input string directly to the class string |
number |
adds the input number directly to the class string |
array |
recursively calls classnames with the array values, adds results to the class string |
object |
object entries truthy values add their property names as a string to the class string |
Here are some examples of what that looks like in practice:
// Simple use case
classnames('ui-button', 'ui-active');
// => 'ui-button ui-active'
// Using a boolean flag to toggle a class
classnames('ui-button', isLoading && 'ui-loading');
// => isLoading ? 'ui-button ui-loading' : 'ui-button'
// Nested array example
classnames('ui-button', ['ui-active', ['ui-loading']])
// => 'ui-button ui-active ui-loading'
// Object input, mapping state to class names example
classnames('ui-button', {
'ui-loading': isLoading,
'ui-hover': isHovered,
})
// => 'ui-button ui-loading ui-hovered' (if both are true)