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.

Discuss (110)