Création d'un composant Text réutilisable

Text.module.scss

@import "../../style/index";

@each $name, $color in $colors {
  .#{$name} { color: $color; }
}

@each $name, $font-family in $fonts-families {
  .#{$name} { font-family: $font-family; }
}

@each $name, $font-size in $font-sizes {
  .#{$name} { font-size: $font-size; }
}

@each $name, $font-weight in $font-weights {
  .#{$name} { font-weight: $font-weight; }
}

Text.tsx

import React, {
  FC, MutableRefObject, useEffect, useRef,
} from 'react';
import cn from 'classnames';
import classNames from 'classnames/bind';
import { TextProps } from './text.d';
import styles from './text.scss';
import ClickableDiv from '../../shared/components/clickableDiv/clickableDiv';

export const Text: FC<TextProps> = (
  {
    className,
    color = 'blue_dark',
    colorAlpha = 1,
    display = 'block',
    font = 'montserrat-regular',
    fontWeight,
    isUnderline,
    lineHeight = 20,
    onClick,
    padding,
    size = 4,
    text,
    textAlign = 'left',
  },
) => {
  const ref = useRef() as MutableRefObject<HTMLDivElement>;

  // On recalcul les classes et le CSS à chaque nouveau rendu, pas besoin de faire un useEffect
  useEffect(() => {
    if (onClick) ref.current.style.cursor = 'pointer';
    if (size > 7) ref.current.style.fontSize = `${size}px`;

    ref.current.style.display = display;
    ref.current.style.lineHeight = `${lineHeight}px`;
    ref.current.style.opacity = colorAlpha?.toString() ?? '';
    ref.current.style.padding = padding ?? '';
    ref.current.style.textAlign = textAlign;
    ref.current.style.textDecoration = isUnderline ? 'underline' : 'none';
  });

  return <ClickableDiv ref={ref} onClick={onClick} className={cn(classNames.bind(styles)(color, size, font, fontWeight), className)}>{text}</ClickableDiv>;
};