{"id":29565992,"url":"https://github.com/sonnv1912/react-motion-modal","last_synced_at":"2025-07-18T22:02:01.704Z","repository":{"id":303810946,"uuid":"1016623264","full_name":"sonnv1912/react-motion-modal","owner":"sonnv1912","description":"An animated modal with framer motion","archived":false,"fork":false,"pushed_at":"2025-07-18T05:01:44.000Z","size":316,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-18T06:44:28.262Z","etag":null,"topics":["animated-modal","modal","react","react-modal"],"latest_commit_sha":null,"homepage":"","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/sonnv1912.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-09T09:30:35.000Z","updated_at":"2025-07-18T05:01:44.000Z","dependencies_parsed_at":"2025-07-09T15:09:17.190Z","dependency_job_id":"e7e47537-069f-40b3-9358-d980f2d15252","html_url":"https://github.com/sonnv1912/react-motion-modal","commit_stats":null,"previous_names":["sonnv1912/react-animated-modal","sonnv1912/react-motion-modal"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sonnv1912/react-motion-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnv1912%2Freact-motion-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnv1912%2Freact-motion-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnv1912%2Freact-motion-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnv1912%2Freact-motion-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonnv1912","download_url":"https://codeload.github.com/sonnv1912/react-motion-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnv1912%2Freact-motion-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265727665,"owners_count":23818484,"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":["animated-modal","modal","react","react-modal"],"created_at":"2025-07-18T22:01:16.028Z","updated_at":"2025-07-18T22:01:56.788Z","avatar_url":"https://github.com/sonnv1912.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-motion-modal\n\n`react-motion-modal` is a flexible modal management library built with [Zustand](https://zustand-demo.pmnd.rs/) for state management and powered by [Framer Motion](https://www.framer.com/motion/) for beautiful animations. It offers full TypeScript type-safety and allows dynamic modal opening with custom parameters.\n\n## ✨ Features\n\n- Stack-based modal management (multiple modals at once)\n- Type-safe parameters per modal\n- Auto-injection of `closeModal()` into each modal props\n- Full intellisense for modal names and parameters\n- Easily extensible via module augmentation\n\n## 🧱 Installation\n\n```bash\nnpm install react-motion-modal\n```\n\nor with yarn:\n\n```bash\nyarn add react-motion-modal\n```\n\n## 🚀 Usage\n\n### 1. Define modal types\n\nCreate a `modal.d.ts` file in your project (make sure to include it in tsconfig.json):\n\n```ts\nimport type { ReactElement } from 'react';\nimport type { ModalStackParams } from 'react-motion-modal';\n\ndeclare module 'react-motion-modal' {\n  interface ModalStackParams {\n    AlertModal: {\n        title: string;\n    };\n    ConfirmModal: {\n        onConfirm: () =\u003e void;\n    };\n  }\n}\n```\n\n### 2. Open modal anywhere\n\n```tsx\nimport { useModal } from 'react-motion-modal';\n\nconst { openModal } = useModal();\n\nopenModal('ConfirmModal', {1  \n  title: 'Are you sure you want to delete?',\n});\n```\n\n### 3. Use `closeModal` inside your modal component\n\n```tsx\nconst ConfirmModal = ({ title, closeModal }: ModalStackParams\u003c'ConfirmModal'\u003e) =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003e{title}\u003c/h1\u003e\n    \u003cbutton onClick={closeModal}\u003eClose\u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\n## 🧩 API\n\n### `openModal(name, params)`\n\nOpens a modal by name. The `params` will be inferred based on modal type.\n\n### `closeModal(name?)`\n\n- If `name` is provided, closes that specific modal.\n- If not, closes the most recent modal (top of the stack).\n\n### `BaseModalParams`\n\nEach modal automatically receives the following props:\n\n| Prop                    | Type                                | Description                                    |\n|-------------------------|-------------------------------------|------------------------------------------------|\n| `closeModal`            | `() =\u003e void`                        | Close function for the modal                   |\n| `closeOnClickOutside`   | `boolean`                           | Close modal when clicking outside              |\n| `closeOnPressEsc`       | `boolean`                           | Close modal when Escape key is pressed         |\n| `container`             | `{ className?: string; override?: boolean; }` | Customize wrapper styles             |\n| `body`                  | `{ className?: string; override?: boolean; }` | Customize inner modal styles          |\n| `animate`               | `{ animate?: TargetAndTransition; exit?: TargetAndTransition; }` | Animation powered by Framer Motion. Customize how the modal enters and exits. |\n| `onClose`               | `() =\u003e void`                        | Callback triggered when modal is closed        |\n\n## 📝 Notes\n\n- Zustand-based, framework-agnostic state management\n- Built-in animation system powered by [Framer Motion](https://www.framer.com/motion/)\n- You can implement a `ModalRenderer` to dynamically render modals from `activeModals` state\n- Great for complex apps requiring nested or dynamic modal stacks\n\n---\nMade with ❤️ by react-motion-modal.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonnv1912%2Freact-motion-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonnv1912%2Freact-motion-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonnv1912%2Freact-motion-modal/lists"}