src/utils/hooks/use-styles.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

import { RefObject, useEffect } from 'react';

export type UseStylesProps = {
  /**
   * A property name or a CSS variable.
   */
  property: string;
  /**
   * The styles.
   */
  styles: string;
  /**
   * A targeted element reference.
   */
  target: RefObject<HTMLElement>;
};

/**
 * Add styles to an element using a React reference.
 *
 * @param {UseStylesProps} props - An object with property, styles and target.
 */
export const useStyles = ({ property, styles, target }: UseStylesProps) => {
  useEffect(() => {
    if (target.current) target.current.style.setProperty(property, styles);
  }, [property, styles, target]);
};