Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Универсальный компонент

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

Button

Рассмотри этот концепт на примере кнопки, т.к. это будет очевиднее. И потом применим к модальному окну тот же подход

Создадим универсальную кнопку простым способом

Button.tsx

import { ReactNode } from "react"
 
type Props = {
  children: ReactNode
  onClick?: () => void
  title?: string
  type?: "button" | "submit" | "reset"
}
export const Button = ({ children, onClick, title, type }: Props) => {
  return (
    <button onClick={onClick} title={title} type={type}>
      {children}
    </button>
  )
}

❗

Но такой подход очень плохой, т.к. у кнопки сотни атрибутов и все их описывать является плохой идеей

...

4. Универсальный Компонент

Оценить качество материала и подачу материала автором видео:

Front-end

Back-end

Карьерный бустер

Основы Front-end

Основы Back-end

Универсальный компонент

Button

Современная UI-Разработка: компоненты, порталы и Storybook

1. Модальное окно

2. Порталы (createPortal)

3. RadixUI

4. Универсальный Компонент

5. Storybook