https://github.com/code9g/modal
Projet 14 de la formation "Développeur JavaScript / React" de OpenClassRooms (Partie composant)
https://github.com/code9g/modal
component npm openclassrooms react school-project
Last synced: 5 months ago
JSON representation
Projet 14 de la formation "Développeur JavaScript / React" de OpenClassRooms (Partie composant)
- Host: GitHub
- URL: https://github.com/code9g/modal
- Owner: code9g
- Created: 2024-11-04T07:47:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-05T13:05:29.000Z (over 1 year ago)
- Last Synced: 2025-08-18T02:42:36.994Z (10 months ago)
- Topics: component, npm, openclassrooms, react, school-project
- Language: JavaScript
- Homepage:
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# code9g-modal
A react component to create and customize modals.
## Installation
To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
```
npm i code9g-modal
```
or
```
yarn add code9g-modal
```
## Documentation
- isOpen: Define is the modal is open or close
- onOpen: Call function when the modal is opened
- onClose: Call function when the modal is closed
- onMouseOut: Call function when the mouse click on "modal" (not in element in children)
- onEscape: Call function when the user use escape key
- autoFocus: Define if the auto focus is used when the modal opening
- focusTrap: Define if the tabulation stay in modal
- openClass and closeClass: This class is used when modal is open or close (custom class)
## Examples
```jsx
function App() {
let subtitle;
const [isOpen, setIsOpen] = useState(false);
const open = () => setIsOpen(true);
const close = () => setIsOpen(false);
const handleOpen = () => {
console.log("The modal opened !");
};
const handleClose = () => {
console.log("The modal opened !");
};
return (
Open Modal
Hello
Submit
Close
);
}
```