Как создать модальное окно в React.js?
Как создать модальное окно в React.js?
2 ответа
от
dmitrypro77 ,
3 года назад
@willa_will Рекомендую посмотреть мой пример на странице https://dropcode.ru/thread/kak-sdelat-modal-noe-okno-v-react-js
Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.
от
magdalen_kub ,
2 года назад
@willa_will
Для создания модального окна в React.js можно использовать компонент React-modal.
- Установите React-modal:
1
|
npm install react-modal |
- Импортируйте компонент в ваш компонент:
1
|
import Modal from 'react-modal'; |
- Инициализируйте состояние, которое будет отвечать за отображение модального окна:
1
|
const [modalIsOpen, setModalIsOpen] = useState(false); |
- Определите методы для открытия и закрытия модального окна:
1 2 3 4 5 6 7 |
const openModal = () => {
setModalIsOpen(true);
}
const closeModal = () => {
setModalIsOpen(false);
}
|
- Создайте компонент модального окна и определите его стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
const MyModal = () => {
return (
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2>Hello</h2>
<button onClick={closeModal}>Close</button>
</Modal>
)
};
|
- Вызовите методы открытия и закрытия модального окна в вашем компоненте, когда это необходимо:
1 2 |
<button onClick={openModal}>Open Modal</button>
<MyModal />
|
15