Компоненты

Наименование

Название компонента должно быть в нотациии PascalCase, т.е. все слова начинаются с заглавной буквы, без символов-разделителей.

Пример простого компонента

import { FC } from "react";
import styles from "./product-card.module.scss";
import clsx from "clsx";

interface ProductCardProps {
  image: string;
  title: string;
  description: string;
  variant?: "primary" | "secondary";
  size?: "small" | "medium" | "large";
}

/**
 * Карточка продукта
 */
export const ProductCard: FC<ProductCardProps> = ({
  title,
  description,
  image,
  variant = "primary",
  size = "medium",
}) => {
  return (
    <div className={clsx(styles.card, styles[`v-${variant}`]) styles[`s-${size}`])}>
      <div className={styles.container}>
        <img src={image} className={styles.image} />
        <h3 className={styles.title}>{title}</h3>
        <p className={styles.description}>{description}</p>
      </div>
    </div>
  );
};

Атрибуты HTML-элемента

Для того, чтобы унаследовать все атрибуты HTML-элемента в пропсах компонента, рекомендуется использовать тип ComponentPropsWithRef.

import type { ComponentPropsWithRef } from "react";

interface ButtonProps extends ComponentPropsWithRef<"button"> {
  variant?: "primary" | "secondary" | "tertiary";
  size?: "small" | "middle" | "large";
  ...
}