src/utils/hooks/use-add-classname.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { useCallback, useEffect } from 'react';

export type UseAddClassNameProps = {
  className: string;
  element?: HTMLElement;
  elements?: NodeListOf<HTMLElement> | HTMLElement[];
};

/**
 * Add className to the given element(s).
 *
 * @param {UseAddClassNameProps} props - An object with classnames and one or more elements.
 */
export const useAddClassName = ({
  className,
  element,
  elements,
}: UseAddClassNameProps) => {
  const classNames = className.split(' ').filter((string) => string !== '');

  const setClassName = useCallback(
    (el: HTMLElement) => {
      el.classList.add(...classNames);
    },
    [classNames]
  );

  useEffect(() => {
    if (element) setClassName(element);
    if (elements && elements.length > 0) elements.forEach(setClassName);
  }, [element, elements, setClassName]);
};