https://github.com/hichamecode/hichamebelyazid-modal
A lightweight React lib to handle modals
https://github.com/hichamecode/hichamebelyazid-modal
Last synced: 5 months ago
JSON representation
A lightweight React lib to handle modals
- Host: GitHub
- URL: https://github.com/hichamecode/hichamebelyazid-modal
- Owner: hichamecode
- Created: 2024-11-16T10:29:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-17T17:04:55.000Z (over 1 year ago)
- Last Synced: 2025-08-30T12:52:25.810Z (10 months ago)
- Language: JavaScript
- Size: 189 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **hichamebelyazid-modal**
---
## Introduction
---
This project provides a _simple_ and _lightweight_ solution for handling your modals in React
## Table of Contents
---
1. [Introduction](#introduction)
3. [Installation](#installation)
4. [Usage](#usage)
5. [Examples](#examples)
6. [License](#license)
7. [Author](#author)
8. [Keywords](#keywords)
## Installation
---
To install the package using NPM:
- type the code below
OR
- copy & paste it
_note_: my name is tricky :sweat_smile: beware of typos!
```bash
npm install hichamebelyazid-modal
```
I recommand using the Roboto Font as it is free. Also, it aligns perfectly with the Material Design principles.
To do so, please embed this code in the `` of your html file
```bash
```
## Usage
---
After the installation, you can start by importing the Modal component and the ClosingButton component, each with their own CSS styles.
- **Imports**
```bash
// components
import { Modal } from 'hichamebelyazid-modal';
import { ClosingButton } from 'hichamebelyazid-modal';
// styles
import "./Modal.css";
import './ClosingButton.css';
```
- **Props**
The `Modal` component expects the following props:
- **`modalTitle`** (`string`): The title displayed at the top of the modal.
- **`modalText`** (`string`): The text content that appears inside the modal.
- **`onClose`** (`function`): A function that closes the modal.
The `ClosingButton` component expects the following props:
- **`onClick`** (`function`): A function that will close the modal.
- **`closingButtonText`** (`string`): The text to be displayed on the button.
- **Accessibility**
The modal has the `role="dialog"` and `aria-modal="true"` attributes for screen reader accessibility.
Users can close the modal by pressing the **Escape** or **Enter** key, which is handled by the `handleKeyDown` function.
## Examples
---
```bash
import { useState } from 'react';
import Modal from './components/Modal/Modal';
import './App.css';
function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
const handleOpenModal = () => setIsModalOpen(true);
const handleCloseModal = () => setIsModalOpen(false);
return (
CLICK TO TEST THE MODAL
{isModalOpen && (
)}
);
}
export default App;
```
## License
---
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
Feel free to use it and contribute to this library.
## Author
---
- **Hichame Belyazid** ([GitHub Profile](https://github.com/hichamecode/))
## Keywords
---
**react** - **react-component** - **modal** - **dialog** - **lightweigt** - **simple**