https://github.com/pyctam-ac/over_close_popup
Кастомный хук - "Закрытие попап по нажатию на esc или overlay"
https://github.com/pyctam-ac/over_close_popup
javascript react typescript
Last synced: 11 months ago
JSON representation
Кастомный хук - "Закрытие попап по нажатию на esc или overlay"
- Host: GitHub
- URL: https://github.com/pyctam-ac/over_close_popup
- Owner: Pyctam-AC
- Created: 2023-09-29T16:55:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-09T22:35:23.000Z (over 2 years ago)
- Last Synced: 2025-03-22T04:14:37.801Z (about 1 year ago)
- Topics: javascript, react, typescript
- Language: TypeScript
- Homepage:
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# over close popup
#### usePopupClose
Хук для закрытия попап по нажатию на **esc** или **overlay**.
Хук разработан для написания кода на React.js.
Данный хук сохраняется в проекте и импортируется в тот файл проекта, в котором обеспечивается функциональность открыттия и закрытия попап (например в файл App.js)
В хук передаётся три параметра:
1. стейт видимости попап.
Данный стейт созадётся с помощью _useState()_ из React.
2. нименивание класса CSS, который отвечает за закрытие попап _closeAllPopups_
- **пример написания класса в CSS**
```css
.popup_opened {
visibility: visible;
}
```
3. функция закрывающая попап
---
**Пример кода в App.js**
```js
// импорт хука
import usePopupClose from "../../hooks/usePopupClose";
...
// стейт видимости попап
const [isPopupVisible, popupVisible] = useState(false);
// функция закрывающая попап
const closeAllPopups = () => {
popupVisible(false);
};
// хук закрытия попапов
usePopupClose (
isPopupVisible,
"popup_opened",
closeAllPopups
);
...
```
Данный хук предназначен для свободного применения.
Хук можно скачать из данного репозитория по ссылке
https://github.com/Pyctam-AC/over_close_popup.git
Автор хука - Рустам Султангалиев
[Pyctam-AC](https://github.com/Pyctam-AC)