https://github.com/mohsensami/modal-react
https://github.com/mohsensami/modal-react
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/mohsensami/modal-react
- Owner: mohsensami
- Created: 2022-06-13T19:34:31.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-25T19:40:02.000Z (over 1 year ago)
- Last Synced: 2025-01-30T18:38:38.349Z (12 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-modal-animation
- Size: 387 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modal React
A customizable modal component built with React and TypeScript. The component uses CSS Modules for styling.
## Manual Setup
1- Add the Modal Component Files
- Modal.tsx
- Modal.module.css
- App.tsx (Example usage)
- App.css (Optional, for styling the example)
2- Ensure your project supports CSS Modules. This can typically be done by configuring your build tool (e.g., Webpack or Create React App).
## Demo
## Installation
To use the Modal component, you need to have a React environment set up. You can then add the Modal component files to your project.
The package can be installed via [npm](https://github.com/npm/cli):
```
npm install modal-react
```
## Usage
React Component:
```javascript
import React, { useState } from "react";
import Modal from "Modal-react";
const App: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => {
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
};
return (
My App
Open Modal
Close}
animationName="bounceInDown"
animateDuration="0.4"
size="md"
showCloseButton={true}
fullSize={true}
>
This is the modal content.
You can customize the modal with various props:
- Control the close button visibility with showCloseButton
- Choose different sizes (sm, md, lg)
- Add custom animations
- Include a custom footer
);
};
export default App;
```
## Props
Here are the props that can be passed to the `` component:
| Name | Type | Required | Description |
| :---------------- | :----------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isOpen` | `boolean` | True | Determines whether the modal is visible or not. |
| `title` | `string` | False | The title of the modal, displayed in the header. |
| `children` | `ReactNode` | False | The content to display inside the modal. |
| `onClose` | `() => void` | False | Function to call when the modal is requested to be closed. |
| `footer` | `ReactNode` | False | (optional): The content to display in the modal footer. |
| `animationName` | `string` | True | The name of the animation to use for the modal. Possible values include: 'fadeIn', 'fadeOut', 'slideInLeft', 'slideInRight', 'slideOutLeft', 'slideOutRight', and other valid animation names. |
| `size` | `string` | False | The size of the modal. Possible values: 'sm' (small), 'md' (medium), 'lg' (large). Default is 'md'. |
| `animateDuration` | `string` | False | You can update the duration of animation. (Default is 0.3s) |
| `showCloseButton` | `boolean` | False | Determines whether to show the close button (×) in the modal header. Default is true. |
| `fullSize` | `boolean` | False | If true, the modal will take up 100% of the viewport's width and height. Default is false. |
- [CSS Animation](https://animate.style/)
## Example
Here's a complete example showing different modal configurations:
```javascript
import React, { useState } from "react";
import Modal from "Modal-react";
const App: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => {
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
};
return (
My App
Open Modal
Close}
animationName="bounceInDown"
animateDuration="0.4"
size="md"
showCloseButton={true}
fullSize={true}
>
This is the modal content.
You can customize the modal with various props:
- Control the close button visibility with showCloseButton
- Choose different sizes (sm, md, lg)
- Add custom animations
- Include a custom footer
);
};
export default App;
```
You can also make the modal take up the entire viewport by using the `fullSize` prop:
```jsx
This modal takes up the full screen!
```
## Authors
- [@mohsensami](https://github.com/mohsensami)
## Contributing
If you want to contribute to this project and make it better, your help is very welcome. Create an issue or submit a pull request.