https://github.com/oth21dev/oxanatheis_14_15092022_modal
:sparkles: Modal - pop up plugin developped in React and published in npmjs.com
https://github.com/oth21dev/oxanatheis_14_15092022_modal
accessibility css3 dialog html5 javascript keyboard-navigation modal npm-package npm-publish popup react
Last synced: 2 months ago
JSON representation
:sparkles: Modal - pop up plugin developped in React and published in npmjs.com
- Host: GitHub
- URL: https://github.com/oth21dev/oxanatheis_14_15092022_modal
- Owner: OTH21DEV
- Created: 2022-09-15T16:02:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-02T06:39:32.000Z (over 3 years ago)
- Last Synced: 2025-03-11T10:45:01.368Z (about 1 year ago)
- Topics: accessibility, css3, dialog, html5, javascript, keyboard-navigation, modal, npm-package, npm-publish, popup, react
- Language: JavaScript
- Homepage:
- Size: 200 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://) [](https://) 
# Modal app - pop up plugin
This project is a React plugin allowing to display an alert in other words a pop up information.
Contains a smoth animation while appear on the screen and can be controlled by keyboard.
## NPM link
https://www.npmjs.com/package/react-modal-oth
## Installation
$ npm i react-modal-oth
$ yarn add react-modal-oth
## How the plugin works
- Import module :
```
import Modal from "react-modal-oth";
```
- Create your state in your component:
```
const [modalIsOpen, setModalIsOpen] = useState(true);
```
- Render your Modal in your component:
```
return ;
```
### ``` params:```
- icon : svg component used in the Modal (decoration purpose).
Import the svg component as:
```
import icon from "react-modal-oth/dist/assets/icon.svg";
```
- closeIcon : svg component used in the Modal - close icon.
Import the svg component as:
```
import close_icon from "react-modal-oth/dist/assets/close.svg";
```
- show : Boolean state use to show and hide the Modal
- setShow : function that updates the state
- title : Modal heading
- text: additional text information
## Example
```
import "./style.css";
const Modal = ({ icon, closeIcon, show, setShow, title, text }) => {
const handleKeydown = useCallback((e) => {
if (e.type === "click" || e.key === "Escape" || e.key === "Enter") {
setShow(false);
}
}, []);
useEffect(() => {
document.addEventListener("keydown", handleKeydown);
return () => {
document.removeEventListener("keydown", handleKeydown);
};
}, []);
return (
show && (
<>
handleKeydown(e)} onClick={(e) => handleKeydown(e)}>
{title}
{text}
handleKeydown(e)}>
OK{" "}
>
)
);
};
```
