{"id":21330168,"url":"https://github.com/mohsensami/modal-react","last_synced_at":"2026-01-05T15:49:12.456Z","repository":{"id":104029233,"uuid":"503090251","full_name":"mohsensami/modal-react","owner":"mohsensami","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-25T19:40:02.000Z","size":396,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T18:38:38.349Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-modal-animation","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohsensami.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-13T19:34:31.000Z","updated_at":"2024-07-25T19:40:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"e21623c6-b58f-413f-8026-26dcea048ad8","html_url":"https://github.com/mohsensami/modal-react","commit_stats":null,"previous_names":["mohsensami/modal-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohsensami%2Fmodal-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohsensami%2Fmodal-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohsensami%2Fmodal-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohsensami%2Fmodal-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohsensami","download_url":"https://codeload.github.com/mohsensami/modal-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245543426,"owners_count":20632648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T22:15:09.881Z","updated_at":"2026-01-05T15:49:12.450Z","avatar_url":"https://github.com/mohsensami.png","language":"TypeScript","readme":"# Modal React\n\nA customizable modal component built with React and TypeScript. The component uses CSS Modules for styling.\n\n## Manual Setup\n\n1- Add the Modal Component Files\n\n- Modal.tsx\n- Modal.module.css\n- App.tsx (Example usage)\n- App.css (Optional, for styling the example)\n\n2- Ensure your project supports CSS Modules. This can typically be done by configuring your build tool (e.g., Webpack or Create React App).\n\n## Demo\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/mrmohsensami/react-modal/raw/main/video.gif\" width=\"\"\u003e\n\u003c/div\u003e\n\n## Installation\n\nTo use the Modal component, you need to have a React environment set up. You can then add the Modal component files to your project.\n\nThe package can be installed via [npm](https://github.com/npm/cli):\n\n```\nnpm install modal-react\n```\n\n## Usage\n\nReact Component:\n\n```javascript\nimport React, { useState } from \"react\";\nimport Modal from \"Modal-react\";\n\nconst App: React.FC = () =\u003e {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const openModal = () =\u003e {\n    setIsModalOpen(true);\n  };\n\n  const closeModal = () =\u003e {\n    setIsModalOpen(false);\n  };\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003ch1\u003eMy App\u003c/h1\u003e\n      \u003cbutton onClick={openModal}\u003eOpen Modal\u003c/button\u003e\n      \u003cModal\n        isOpen={isModalOpen}\n        title=\"My Modal\"\n        onClose={closeModal}\n        footer={\u003cbutton onClick={closeModal}\u003eClose\u003c/button\u003e}\n        animationName=\"bounceInDown\"\n        animateDuration=\"0.4\"\n        size=\"md\"\n        showCloseButton={true}\n        fullSize={true}\n      \u003e\n        \u003cp\u003eThis is the modal content.\u003c/p\u003e\n        \u003cp\u003eYou can customize the modal with various props:\u003c/p\u003e\n        \u003cul\u003e\n          \u003cli\u003eControl the close button visibility with showCloseButton\u003c/li\u003e\n          \u003cli\u003eChoose different sizes (sm, md, lg)\u003c/li\u003e\n          \u003cli\u003eAdd custom animations\u003c/li\u003e\n          \u003cli\u003eInclude a custom footer\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## Props\n\nHere are the props that can be passed to the `\u003cModal /\u003e` component:\n\n| Name              | Type         | Required | Description                                                                                                                                                                                    |\n| :---------------- | :----------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `isOpen`          | `boolean`    | True     | Determines whether the modal is visible or not.                                                                                                                                                |\n| `title`           | `string`     | False    | The title of the modal, displayed in the header.                                                                                                                                               |\n| `children`        | `ReactNode`  | False    | The content to display inside the modal.                                                                                                                                                       |\n| `onClose`         | `() =\u003e void` | False    | Function to call when the modal is requested to be closed.                                                                                                                                     |\n| `footer`          | `ReactNode`  | False    | (optional): The content to display in the modal footer.                                                                                                                                        |\n| `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. |\n| `size`            | `string`     | False    | The size of the modal. Possible values: 'sm' (small), 'md' (medium), 'lg' (large). Default is 'md'.                                                                                            |\n| `animateDuration` | `string`     | False    | You can update the duration of animation. (Default is 0.3s)                                                                                                                                    |\n| `showCloseButton` | `boolean`    | False    | Determines whether to show the close button (×) in the modal header. Default is true.                                                                                                          |\n| `fullSize`        | `boolean`    | False    | If true, the modal will take up 100% of the viewport's width and height. Default is false.                                                                                                     |\n\n- [CSS Animation](https://animate.style/)\n\n## Example\n\nHere's a complete example showing different modal configurations:\n\n```javascript\nimport React, { useState } from \"react\";\nimport Modal from \"Modal-react\";\n\nconst App: React.FC = () =\u003e {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const openModal = () =\u003e {\n    setIsModalOpen(true);\n  };\n\n  const closeModal = () =\u003e {\n    setIsModalOpen(false);\n  };\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003ch1\u003eMy App\u003c/h1\u003e\n      \u003cbutton onClick={openModal}\u003eOpen Modal\u003c/button\u003e\n      \u003cModal\n        isOpen={isModalOpen}\n        title=\"My Modal\"\n        onClose={closeModal}\n        footer={\u003cbutton onClick={closeModal}\u003eClose\u003c/button\u003e}\n        animationName=\"bounceInDown\"\n        animateDuration=\"0.4\"\n        size=\"md\"\n        showCloseButton={true}\n        fullSize={true}\n      \u003e\n        \u003cp\u003eThis is the modal content.\u003c/p\u003e\n        \u003cp\u003eYou can customize the modal with various props:\u003c/p\u003e\n        \u003cul\u003e\n          \u003cli\u003eControl the close button visibility with showCloseButton\u003c/li\u003e\n          \u003cli\u003eChoose different sizes (sm, md, lg)\u003c/li\u003e\n          \u003cli\u003eAdd custom animations\u003c/li\u003e\n          \u003cli\u003eInclude a custom footer\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\nYou can also make the modal take up the entire viewport by using the `fullSize` prop:\n\n```jsx\n\u003cModal isOpen={isModalOpen} onClose={closeModal} fullSize\u003e\n  \u003cp\u003eThis modal takes up the full screen!\u003c/p\u003e\n\u003c/Modal\u003e\n```\n\n## Authors\n\n- [@mohsensami](https://github.com/mohsensami)\n\n## Contributing\n\nIf you want to contribute to this project and make it better, your help is very welcome. Create an issue or submit a pull request.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohsensami%2Fmodal-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohsensami%2Fmodal-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohsensami%2Fmodal-react/lists"}