Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- type ValidClass = string | number | undefined | null | ObjectClass;
- type ObjectClass = {
- [key: string]: boolean | undefined;
- };
- type ClassName = ValidClass | ValidClass[];
- /**
- * Easier class names management for JSX elements.
- *
- * Usage:
- *
- * ```js
- <div className={classNames('some-class', 'another', ['arr', 'of', 'classes'], {
- 'conditional-class': this.state.someValue
- })}>
- ```
- * Note that the order of the keys in a passed object will not be explicitly
- * preserved: that's up to the Javascript engine (most engines preserve key order).
- */
- export default function classNames(...args: ClassName[]): string {
- return args
- .filter((_) => !!_) // Filter out falsiness
- .map((arg) => {
- const type = typeof arg;
- // We can add numbers and strings as class names instantly,
- // but for arrays and objects, we need to traverse.
- if (type === 'string' || type === 'number') {
- return arg;
- } else if (Array.isArray(arg) && arg.length) {
- // Recuuuurse
- return classNames(...arg);
- } else if (type === 'object' && arg) {
- const objMap = <ObjectClass>arg;
- return Object.keys(objMap)
- .filter((cl) => objMap[cl])
- .join(' ');
- }
- return '';
- })
- .join(' ');
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement