{"id":16317390,"url":"https://github.com/mychidarko/react-js-modal","last_synced_at":"2025-06-20T02:36:48.371Z","repository":{"id":57346099,"uuid":"357707860","full_name":"mychidarko/react-js-modal","owner":"mychidarko","description":"📦 The simplest modal manager for your react apps","archived":false,"fork":false,"pushed_at":"2022-03-08T22:36:06.000Z","size":131,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T21:46:41.458Z","etag":null,"topics":["library","modal","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-ts-modal","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/mychidarko.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}},"created_at":"2021-04-13T22:45:58.000Z","updated_at":"2022-02-27T02:14:37.000Z","dependencies_parsed_at":"2022-08-25T20:00:17.849Z","dependency_job_id":null,"html_url":"https://github.com/mychidarko/react-js-modal","commit_stats":null,"previous_names":["darko-mychi/react-js-modal"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mychidarko/react-js-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Freact-js-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Freact-js-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Freact-js-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Freact-js-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mychidarko","download_url":"https://codeload.github.com/mychidarko/react-js-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mychidarko%2Freact-js-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260867346,"owners_count":23074912,"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":["library","modal","reactjs","typescript"],"created_at":"2024-10-10T22:08:19.801Z","updated_at":"2025-06-20T02:36:43.362Z","avatar_url":"https://github.com/mychidarko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React JS Modal\n\nThe simplest modal manager for your react apps.\n\n## Installation\n\nYou can get react js modal up and running simply with yarn or npm\n\n```sh\nnpm install react-ts-modal --save\n```\n\n```sh\nyarn add react-ts-modal\n```\n\n## QuickStart\n\nTo get started, simply import the modal component.\n\n```js\nimport Modal from \"react-ts-modal\";\n```\n\nReact JS modal also comes with styles you can apply for cool effects and transitions. It comes in both CSS and SCSS, so you can use whichever you prefer.\n\n```js\nimport \"react-ts-modal/css/styles.scss\";\n// or\nimport \"react-ts-modal/css/styles.css\";\n```\n\n\u003e It's better to import the styles in a top-most component like `App.js` in create-react-app.\n\nFrom there, you can start building your awesome modal.\n\n\u003e react-ts-modal also has 100% typescript support as it's completely written in TypeScript.\n\n```tsx\nimport Modal from \"react-ts-modal\";\n\nconst MyAwesomeModal = () =\u003e {\n  return (\n    \u003cModal name=\"awesome-modal\"\u003e\n      \u003cdiv\u003eThis is the modal content!\u003c/div\u003e\n    \u003c/Modal\u003e\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"application\"\u003e\n      ... all the stuff on this page\n      \u003cMyAwesomeModal /\u003e\n      {/* used here to make sure it's present in the DOM */}\n    \u003c/div\u003e\n  );\n};\n```\n\nFrom here, you can trigger the modal by simply doing this\n\n```tsx\nimport { modal } from \"react-ts-modal\";\n\n// show modal defined above\nmodal.show(\"awesome-modal\");\n\n// hide modal\nmodal.hide(\"awesome-modal\");\n\n// get modal instance in dom\nconst myModal = modal.find(\"awesome-modal\");\n\n// check if modal is open\nmodal.isOpen(\"awesome-modal\");\n```\n\nThat's it! A very easy to use project.\n\n**Watch out: `\u003cModal\u003e` requires the name prop. When using TypeScript, the compiler will shout at you if you miss this :-(**\n\nOther available props for `\u003cModal\u003e`\n\n- name: string ------------------ The name of the modal (required)\n- className?: string ------------ Modal className (optional)\n- close?: Function -------------- Custom modal close method (optional)\n- closeButton?: boolean --------- Show/hide modal close button (default `true`)\n- children: any ----------------- Modal contents (required)\n- show?: boolean ---------------- Manually show/hide modal (optional)\n- size?: string ----------------- Size of modal (optional, uses modal styling)\n- pageScroll?: boolean ---------- Enable/Disable page content scroll with modal active\n\nYou can find a \"real-world\" demo [here](https://mychi-store.netlify.app/) source code [here](https://github.com/mychidarko/store-front).\n\nLeave a star, contribute or give your feedback on this package. Thanks.\n\n## Changelog\n\n### v1.1.0 - Apr 19, 2021\n\n#### Added\n\n- `modal.exists` to check if modal exists in DOM\n\n#### Fixed\n\nModal close button onClick fixed.\n\n#### Changed\n\n- Warnings moved from `modal.find` to dependent methods.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmychidarko%2Freact-js-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmychidarko%2Freact-js-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmychidarko%2Freact-js-modal/lists"}