classes
Normalize strings, booleans, null and undefined into a valid React className string
1 min read
— views
New kid on the block!
Heads up: there is a new utility package called mxcn
that does pretty much the same thing as below. I'd recommend you use this package instead of the
code below 😛.
Implementation
Add multiple classes that can also be type boolean
, null
and undefined
.
src/util/classes.ts
export function classes(...arr: (string | boolean | null | undefined)[]): string {
return arr.filter(Boolean).join(" ");
}
tsx
Usage
<div className={classes("myClass", isTrue && "anotherClass")}>Hello world!</div>
tsx