Как создать модальное окно в React.js?

Пользователь

от willa_will , в категории: JavaScript , 2 года назад

Как создать модальное окно в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от dmitrypro77 , 2 года назад

@willa_will Рекомендую посмотреть мой пример на странице https://dropcode.ru/thread/kak-sdelat-modal-noe-okno-v-react-js

Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

Пользователь

от magdalen_kub , год назад

@willa_will 

Для создания модального окна в React.js можно использовать компонент React-modal.

  1. Установите React-modal:
1
npm install react-modal


  1. Импортируйте компонент в ваш компонент:
1
import Modal from 'react-modal';


  1. Инициализируйте состояние, которое будет отвечать за отображение модального окна:
1
const [modalIsOpen, setModalIsOpen] = useState(false);


  1. Определите методы для открытия и закрытия модального окна:
1
2
3
4
5
6
7
const openModal = () => {
  setModalIsOpen(true);
}

const closeModal = () => {
  setModalIsOpen(false);
}


  1. Создайте компонент модального окна и определите его стили:
 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. Вызовите методы открытия и закрытия модального окна в вашем компоненте, когда это необходимо:
1
2
<button onClick={openModal}>Open Modal</button>
<MyModal />