125. implement classNames()
Share
medium - accepted / - tried
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.
Related Lists
implement it by yourself