Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohsensami/modal-react
https://github.com/mohsensami/modal-react
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/mohsensami/modal-react
- Owner: mohsensami
- Created: 2022-06-13T19:34:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-25T19:40:02.000Z (5 months ago)
- Last Synced: 2024-11-05T01:35:43.801Z (about 2 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"
>
This is the modal content.
);
};
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. |
| `animateDuration` | `string` | False | You can update the duration of animation. (Default is 0.3s) |
- [CSS Animation](https://animate.style/)
## 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.