Всем Привет! В этой статье разберем как создать простой компонент модального окна в React JS с нуля. Если задать в поиске фразу - модальное окно для React JS, то можно найти огромное количество готовых библиотек. Так сказать - подключай и используй. Но, чтобы понять, как именно это работает, нужно хотя бы один раз написать компонент модального окна самостоятельно. В нашем случае это будет SimpleModal Component, но Вы можете назвать его по своему. Если формат изложения материала в виде текста Вам не подходит, то можете посмотреть видео или скачайте готовый проект с github...

Сегодня я объясню, как создать собственный React Hook для модального компонента. Модальные компоненты довольно проблемны из-за проблем с доступностью и структурой в React. Модальные элементы имеют наложение на экране, которое имеет более высокий визуальный приоритет, чем все остальные элементы. Если бы мы использовали z-index, он должен был бы быть самым высоким. Однако это плохая практика, поскольку он глубоко вложен, а родительские элементы, находящиеся высоко в дереве, имеют приоритет CSS. Начнем с создания модального компонента React, который будет использовать пользовательский useModal...