https://github.com/mathhetru/simplemathmodal
Create a npm package modal for reactJS
https://github.com/mathhetru/simplemathmodal
npm npm-package package react typescript
Last synced: 3 months ago
JSON representation
Create a npm package modal for reactJS
- Host: GitHub
- URL: https://github.com/mathhetru/simplemathmodal
- Owner: mathhetru
- Created: 2024-08-22T08:27:50.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-27T09:22:58.000Z (over 1 year ago)
- Last Synced: 2025-03-12T06:15:15.768Z (over 1 year ago)
- Topics: npm, npm-package, package, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/simple-modal-math
- Size: 50.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modal Component
This is a reusable Modal component built with React. It displays a modal dialog with customizable options, including a header, main content area, and footer with an optional close button.
It was made for the 14th Openclassrooms project of Front-end Web Developper training by OpenClassrooms "Switch a jQuery library to React".
## Installation
### Install
```bash
npm i simple-modal-math
```
### Install depencies
To use the Modal component in your project, you need to have the following dependencies installed:
```bash
npm install react@^18.2.55 react-dom@^18.2.19 @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
```
## Usage
### Javascript
Here's how you can use the Modal component in your React application:
```javascript
import React, { useState } from "react";
import { Modal } from "simple-modal-math";
function App() {
const [isOpen, setIsOpen] = useState(false);
const handleClick = () => {
setIsOpen(!isOpen);
};
const handleClose = () => {
setIsOpen(false);
};
return (
Open Modal
);
}
export default App;
```
### Props
The Modal component accepts the following props:
- isOpen (boolean, required): Controls whether the modal is open or not.
- closable (boolean, optional): Determines if the modal has a close button in the header. Defaults to false.
- headerTitle (string, optional): Text to display in the modal's header. If not provided, the header will be empty.
- mainContent (string, optional): The main content text to display in the modal. Defaults to an empty string if not provided.
- hasFooter (boolean, optional): Determines if the modal should have a footer. Defaults to false.
- buttonFooter (string, optional): Text for the footer button. Defaults to "Close" if not provided.
- modalSize ("small" | "medium" | "large", optional): Sets the size of the modal. Defaults to "medium".
- onClose (function, required): Callback function to handle the closing of the modal.
### Styling
The modal component requires a CSS file (modal.css) for styling. Below is a basic example of the CSS classes used:
```css
.m-modal {
/* Modal background and positioning styles */
}
.m-modal-content {
/* Modal content container styles */
}
.small {
max-width: 30vw;
}
.medium {
max-width: 50vw;
}
.large {
max-width: 70vw;
}
.m-modal-header {
/* Modal header styles */
}
.m-modal-header__text {
/* Header text styles */
}
.m-modal-header__button {
/* Close button styles */
}
.m-modal-main {
/* Main content area styles */
}
.m-modal-main__text {
/* Main content text styles */
}
.m-modal-footer {
/* Footer container styles */
}
.m-modal-footer__button {
/* Footer button styles */
}
```
You can customize the styles by modifying the provided CSS or adding your own.
## Example
```javascript
import React, { useState } from "react";
import { Modal } from "simple-modal-math";
function App() {
const [isModalOpen, setModalOpen] = useState(false);
const toggleModal = () => {
setModalOpen(!isModalOpen);
};
return (
Toggle Modal
);
}
export default App;
```
This will render a modal with a header, main content area, and a footer with a close button. The modal can be closed by clicking the close button or by triggering the onClose function passed as a prop.
## Contributing
Contributions are welcome! Please submit a pull request or open an issue to discuss any changes.