If using React, you can set the prop className to add class name to an element, it is string so you can add multiple class names like this:

<p className="classname1 classname2">
  BFE.dev can help
</p>

When class names are dynamically generated, it becomes verbose.

<p 
  className={`classname1  ${shouldAddClassname2 ? 'classname2' : ''}`}>
  BFE.dev can help
</p>

classnames can help with this.

classNames() accepts arbitrary arguments, filter out the falsy values, and generate the final className string.

string and number are used directly.

classNames('BFE', 'dev', 100) 
// 'BFE dev 100'

other primitives are ignored.

classNames(
  null, undefined, Symbol(), 1n, true, false
) 
// ''

Object's enumerable property keys are kept if the key is string and value is truthy. Array should be flattened.


const obj = new Map()
obj.cool = '!'

classNames({BFE: [], dev: true, is: 3}, obj) 
// 'BFE dev is cool'

classNames(['BFE', [{dev: true}, ['is', [obj]]]])
// 'BFE dev is cool'

Please implement your own classNames().

note

It is not the goal to reimplement the original package, so the spec might be a little different, please follow the above description.