{"id":34582316,"url":"https://github.com/imykhailychenko/react-modal-dom","last_synced_at":"2026-05-06T00:02:30.414Z","repository":{"id":57150143,"uuid":"311726014","full_name":"iMykhailychenko/react-modal-dom","owner":"iMykhailychenko","description":"Simple and customizable modal with react","archived":false,"fork":false,"pushed_at":"2020-11-12T09:37:51.000Z","size":904,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-25T22:32:33.796Z","etag":null,"topics":["component","custom","modal","react","react-modal","redux","responsive"],"latest_commit_sha":null,"homepage":"https://react-modal-dom.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iMykhailychenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-10T16:53:18.000Z","updated_at":"2020-11-12T09:37:53.000Z","dependencies_parsed_at":"2022-09-03T17:51:38.616Z","dependency_job_id":null,"html_url":"https://github.com/iMykhailychenko/react-modal-dom","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/iMykhailychenko/react-modal-dom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMykhailychenko%2Freact-modal-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMykhailychenko%2Freact-modal-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMykhailychenko%2Freact-modal-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMykhailychenko%2Freact-modal-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iMykhailychenko","download_url":"https://codeload.github.com/iMykhailychenko/react-modal-dom/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMykhailychenko%2Freact-modal-dom/sbom","scorecard":{"id":476825,"data":{"date":"2025-08-11","repo":{"name":"github.com/iMykhailychenko/react-modal-dom","commit":"428acd409a6b3c00cc9b53a38e12b0df33beb16e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Vulnerabilities","score":0,"reason":"29 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T15:31:16.614Z","repository_id":57150143,"created_at":"2025-08-19T15:31:16.614Z","updated_at":"2025-08-19T15:31:16.614Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32672682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["component","custom","modal","react","react-modal","redux","responsive"],"created_at":"2025-12-24T10:18:43.754Z","updated_at":"2026-05-06T00:02:30.407Z","avatar_url":"https://github.com/iMykhailychenko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-modal-dom\n\n\n## Lightweight and customizable react modal\n\nWe do not limit you with html markup. You can create responsive modal windows of absolutely any format and manage them from anywhere in your react application.\n\n## Installation\n```javascript\nnpm i react-modal-dom\n# or\nyarn add react-modal-dom\n```\n\n## Demo\n\nCheck out the demo here \u003ca href=\"https://react-modal-dom.netlify.app/\" title=\"demo\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ehttps://react-modal-dom.netlify.app/\u003c/a\u003e\n\n\u003cimg src=\"./static/step3.png\" alt=\"\"\u003e\n\n## Usage\n\n#### Step 1 - add \"ModalComponent\" into your index.js file. \n\nNote!   \nUse only one 'ModalComponent' component in the app.\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ModalComponent from 'react-modal-dom';\n\nimport App from './App';\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cModalComponent /\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById('root')\n);\n```\n\n#### Step 2 - create your custom modal window\n\n```javascript\nconst MyModal = () =\u003e {\n  return (\n    \u003cdiv className='modal'\u003e\n      \u003cp\u003eLorem ipsum dolor sit amet consectetur adipisicing elit.\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default MyModal;\n```\n\nWhat you will get:\n\n\u003cimg src=\"./static/step1.png\" alt=\"\"\u003e\n\n#### Step 3 - use css to create styles for your modal\n\n```css\n/* example */\n.modal {\n  width: 100%;\n  max-width: 400px;\n  padding: 20px;\n  border-radius: 10px;\n  background: #fff;\n}\n```\nWhat you will get:\n\n\u003cimg src=\"./static/step2.png\" alt=\"\"\u003e\n\n#### Step 4 - use `modal` obj methods to close or open your modal window\n\n```javascript\nimport React from 'react';\nimport { modal } from 'react-modal-dom';\n\nimport MyModal from '../MyModal';\n\nconst MyApp = () =\u003e {\n  const handleOpenModal = () =\u003e {\n    modal.open(\u003cMyModal/\u003e)\n  }\n  return (\n    \u003c\u003e\n      \u003cbutton type=\"button\" onClick={handleOpenModal}\u003e\n        Open modal\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" onClick={modal.close}\u003e\n        Close modal\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default MyApp;\n```\n## modal object\nThis object has only 2 methods: `close` and `open`\n```javascript\nmodal.open(\u003cCustomModal/\u003e, callback)\nmodal.close(callback)\n```\n\n`\u003cCustomModal /\u003e` - valid react component. Use only jsx sintaxis   \n`callback` - provide callback that will call immediately after your modal close or open\n\n\n## Use modal obj methods even in your redux actions\n\n```javascript\nimport { modal } from 'react-modal-dom';\n\nexport const myAction = () =\u003e async dispatch =\u003e {\n  dispatch({ type: 'START' });\n  try {\n    ....\n    dispatch({ type: 'SUCCESS', payload: data });\n    // close modal here\n    modal.close();\n\n```\n\n```javascript\nimport { modal } from 'react-modal-dom';\n\nfunction* myWatcher() {\n  try {\n    ...\n    yield put({ type: 'SUCCESS', payload: data });\n    // close modal here\n    modal.close();\n\n```\n\n## Create function to open your custom modal in redux files\n\n```javascript\nimport { modal } from 'react-modal-dom';\n\nconst MyModal = () =\u003e {\n  return (\n    \u003cdiv className='modal'\u003e\n      \u003cp\u003eLorem ipsum dolor sit amet consectetur adipisicing elit.\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport const openMyModal = () =\u003e {\n  modal.open(\u003cMyModal /\u003e)\n}\n\nexport default MyModal;\n```\n\n```javascript\nimport { openMyModal } from '../MyModal';\n\nexport const myAction = () =\u003e async dispatch =\u003e {\n  dispatch({ type: 'START' });\n  try {\n    ...\n    dispatch({ type: 'SUCCESS', payload: data });\n    // open your custom modal\n    openMyModal();\n```\n\n```javascript\nimport { openMyModal } from '../MyModal';\n\nfunction* myWatcher() {\n  try {\n    ...\n    yield put({ type: 'SUCCESS', payload: data });\n    // open your custom modal\n    openMyModal();\n}\n```\n\n## Customize modal backdrop with css\nJust write some styles for class `.react-modal-backdrop`. Your styles will be prioritized over library styles.\n```css\n/* example */\n.react-modal-backdrop {\n  background: rgba(0, 0, 0, 0.2);\n  backdrop-filter: blur(15px);\n}\n```\nWhat you will get:\n\n\u003cimg src=\"./static/step3.png\" alt=\"\"\u003e\n\n## Use with reacr-router-dom\nBy default, the modal does not close when the route is changed. To fix this you need to write this code in your App.js component.\n\n```javascript\nimport { withRouter } from 'react-router-dom';\nimport { modal } from 'react-modal-dom';\n\nclass App extends Component {\n  componentDidUpdate({ location }) {\n    const { pathname } = this.props.location;\n    if (location.pathname !== pathname) modal.close();\n  }\n}\nexport default withRouter(App);\n\n// or with hooks\n\nimport { useHistory } from 'react-router-dom';\nimport { modal } from 'react-modal-dom';\n\nconst App = () =\u003e {\n  const history = useHistory();\n  history.listen(modal.close);\n...\n```\n\n## TODO\n- Animations\n- Write tests\n- TypeScript\n- Close modals on route change\n- Other","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimykhailychenko%2Freact-modal-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimykhailychenko%2Freact-modal-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimykhailychenko%2Freact-modal-dom/lists"}