Сегодня я объясню, как создать собственный React Hook для модального компонента.
Модальные компоненты довольно проблемны из-за проблем с доступностью и структурой в React. Модальные элементы имеют наложение на экране, которое имеет более высокий визуальный приоритет, чем все остальные элементы.
Если бы мы использовали z-index, он должен был бы быть самым высоким. Однако это плохая практика, поскольку он глубоко вложен, а родительские элементы, находящиеся высоко в дереве, имеют приоритет CSS.
Создание модального компонента React
Начнем с создания модального компонента React, который будет использовать пользовательский useModal.
Для этого урока я буду использовать модальные окна Bloomer, вы можете установить их с помощью yarn add bloomer.
Давайте рассмотрим простой модальный компонент ниже:
Это довольно простой компонент для понимания, который помогает обернуть наши компоненты в функцию. Мы можем запустить его с помощью:
Написание пользовательского хука: useModal
Наш модальный компонент готов, давайте рассмотрим основную тему и посмотрим, как создать useModal Hook.
Рассмотрим код ниже:
Здесь сделано довольно много вещей выше:
- Добавлен хук useState для нашего состояния modalOpen и установили значение initialMode.
- Объявлена функция переключения, которая вызывает setModalOpen, что изменит наше значение modalOpen.
- Возвращаем modalOpen, setModalOpen и toggle, чтобы компонент имел к ним доступ.
Использование
Затем, чтобы использовать и CustomModal, и useModal, рассмотрим следующий пример:
Теперь мы можем запустить наше модальное окно с помощью пользовательского хука: useModal.
Все, что мы сделали здесь, это:
- Импортируем нашу функцию useModal, инициализируем ее и получаем доступ к itemModalOpen, setItemModalOpen, toggleModal.
- Мы передали toggleModal кнопке, чтобы мы могли переключать наше модальное окно с помощью кнопки.
- Далее мы передаем itemModalopen в свойство isActive.
- Затем мы передали setItemModalOpen в нашу функцию свойства handleClose.
Передача данных в модальные окна: useModalWithData
Наш useModal работает достаточно хорошо и может использоваться без сбоев.
Однако это быстро ограничивает запуск модального окна и не позволяет узнать, какой элемент его запустил, или передать ему данные через хуки.
Предположим, вы работаете с таблицей со списком данных. Вы хотите иметь возможность нажать на строку или столбец и позволить модальному окну появиться с полной информацией о том, на что вы нажали.
Один из способов сделать это — передать идентификатор или полные данные элемента, на который вы щелкнули, в useModal, а затем в компонент, который будет использовать эти данные.
Рассмотрим следующий кастомный хук useModalWithData:
Все, что мы сделали выше, это:
Инициализируем наш предыдущий useModal, получаем доступ к modalOpen и setModalOpen из Hook.
Инициализируем useState для сохранения выбранных состояний идентификатора, а также setSelected для применения изменений.
Объявляем функцию setModalState, которая принимает state как prop, вызываем setModalOpen для управления модальным окном и устанавливаем selected в null, если state равен false.
Затем возвращаем то, к чему можно получить доступ из Hooks.
Заключение
Модальные окна могут быть сложным компонентом в React из-за того, как React структурирует DOM. Использование его с React Hooks делает его более сложным.
Теперь, когда вы узнали, как создать собственный модальный Hook, вы можете распространить ту же модальную логику на различные типы и стили модальных окон.