stepan10andreev / universal_modal

Универсальное модальное окно (React)

Универсальное модальное окно

Варианты

1. Единый компонент Modal:

• модальное окно позиционируется по центру на весь экран с полупрозранчым фоном (можно изменить)
• сам компонент Modal это обертка для любого контента внутри него (например, создать несколько карточек для разного типов контента модальных окон и класть их как children в обертку <Modal>content</Modal>

Функционал:

• prop onClose - закрытие модального окна (передается в сам компонент Modal)

  • закрытие окна по клику вне него (по умолчанию)
  • prop nonClosing (опционально) позволяет создать незакрывающееся окно (например, со спиннером при загрузке данных и когда нужно чтобы пользователь НЕ взаимодействовал с интерактивными элементами (см.ниже)
  • в комбинации с иконкой (кнопкой) Выйти из модалки prop nonClosing позвляет создать окно, которое будет закрываться только по клику на иконку

• prop actionsOnClose возможность добавить действие по закрытию модального окна (например, переадресация или показ сообщения (alert) и т.д

• prop zIndex позволяет установить z-index окна (по умолчанию значение - 10)

Иконка(кнопка) Выйти из модального окна. Несколько вариантов:

1. Передача иконки непосредственно в Modal в качестве props (со стилями по умолчанию) + дополнительно возможность передачи обьекта со стилями для нее для изменения настроек по умолчанию:

   • проблема с hover-эффектами - они будут по умолчанию в любом окне одинаковые

2. Иконка со стилями непосредственно в компоненте Modal - подходит если в макете все модальные окна с одинаковыми иконками + можно добавить возможность убрать иконку (если есть окна без иконки)

3. Наилучший (по-моему) - передавать иконки непосредственно в обертку <Modal>content, icon</Modal>:

   • позволяет использовать любую иконку в разных модальных окнах
   • позволяет задавать собственные разные стили для иконки (кнопки) для разных окон
   • но просто больше кода - в каждую обертку <Modal></Modal> нужно каждый раз передавать иконку, если во всех окнах иконки одинаковые - то дублирование

2. Компонент Modal в сочетании с кастомным хуком useModal:

• примерно то же самое, но функции открытия/закрытия окна берет на себя хук useModal поэтому сам компонент Modal меньше по объему и функционлу
• в остальном - те же props дотупны Modal с различными вариантами размещения иконки (кнопки)

Использование

В корневой layout.tsx должен быть div c id: modal_root. Модальное окно рендерится именно в него при вызове из любого компонента.

Установка

Установка зависимостей

Для установки зависимостей, выполните команду:

$ npm i

Запуск Development сервера

Чтобы запустить сервер для разработки, выполните команду:

npm run dev

На главной странице расположено несколько кнопок с вариантами открытия модальных окон с разными функционалами. Описание функционалов - на кнопках и на самом модальном окне при открытии. Плюс ссылка на ссылка на страницу с использованием компонента Modal в сочетании с хуком useModal