blob: 0584084811f885c22acf57a904c8eaee18b43baa (
plain)
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
33
34
|
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.
*/
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]);
};
export default useAddClassName;
|
