{"id":15313872,"url":"https://github.com/itsdouges/react-best-modal","last_synced_at":"2025-04-15T01:44:49.294Z","repository":{"id":71499349,"uuid":"115555819","full_name":"itsdouges/react-best-modal","owner":"itsdouges","description":"Simple is best. Accessible out of the box, tiny api, bring your own styles.","archived":false,"fork":false,"pushed_at":"2018-04-12T10:52:37.000Z","size":1279,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T13:44:45.772Z","etag":null,"topics":["a11y","accessibility","best","dialog","modal","modal-dialog","react","react-dialog","react-modal","react-modal-dialog","react-portal","simple"],"latest_commit_sha":null,"homepage":"https://madou.github.io/react-best-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/itsdouges.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-12-27T20:39:26.000Z","updated_at":"2025-02-11T15:50:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"4ffeaeee-1bde-4cd1-972b-3028935ed953","html_url":"https://github.com/itsdouges/react-best-modal","commit_stats":{"total_commits":39,"total_committers":2,"mean_commits":19.5,"dds":0.02564102564102566,"last_synced_commit":"e74631d79dedfa4c90254579e25f0d68bd5199f4"},"previous_names":["madou/react-best-modal"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-best-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-best-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-best-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-best-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdouges","download_url":"https://codeload.github.com/itsdouges/react-best-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991532,"owners_count":21194893,"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":["a11y","accessibility","best","dialog","modal","modal-dialog","react","react-dialog","react-modal","react-modal-dialog","react-portal","simple"],"created_at":"2024-10-01T08:43:29.442Z","updated_at":"2025-04-15T01:44:49.276Z","avatar_url":"https://github.com/itsdouges.png","language":"TypeScript","readme":"# react-best-modal\n\n[![NPM version](http://img.shields.io/npm/v/react-best-modal.svg?style=flat-square)](https://www.npmjs.com/package/react-best-modal)\n[![NPM downloads](http://img.shields.io/npm/dm/react-best-modal.svg?style=flat-square)](https://www.npmjs.com/package/react-best-modal)\n[![Build Status](http://img.shields.io/travis/madou/react-best-modal/master.svg?style=flat-square)](https://travis-ci.org/madou/react-best-modal)\n[![codecov](https://codecov.io/gh/madou/react-best-modal/branch/master/graph/badge.svg)](https://codecov.io/gh/madou/react-best-modal)\n\nSimple is best. Accessible out of the box, tiny api, bring your own styles. Don't let libraries you use get in the way of what you want, build up, not down. **React 16+ only.**\n\n## Usage\n\n```sh\nnpm install react-focus-lock react-best-modal --save\n```\n\n```javascript\nimport React from 'react';\nimport BestModal from 'react-best-modal';\nimport { render } from 'react-dom';\n\nconst appRoot = document.getElementById('root');\n\nconst App = ({ showModal, closeModal }) =\u003e (\n  \u003cdiv\u003e\n    Hi Mom!\n    {showModal \u0026\u0026 (\n      \u003cBestModal onRequestClose={closeModal} appRoot={appRoot}\u003e\n        \u003cbutton\u003eHello, World!\u003c/button\u003e\n      \u003c/BestModal\u003e\n    )}\n  \u003c/div\u003e\n);\n\nrender(\u003cApp /\u003e, appRoot);\n```\n\n**NOTE**: Make sure you have an element inside your modal that is focusable. Essentially, any input, button, or element with `tabIndex=\"0\"`. This is to ensure focus is set correctly inside the modal - while this isn't enforced, it's strongly advised.\n\n## Styling\n\nIt's up to you to style and position your modal. Want to disable scrolling content behind your modal? You have to do it yourself. [There's an example implementation here.](https://madou.github.io/react-best-modal/?selectedKind=Styling\u0026selectedStory=and%20finally%20also%20disabling%20body%20from%20scrolling%20behind)\n\n### Transitions\n\n`react-best-modal` works perfectly with [`ReactTransitionGroup`](https://reactcommunity.org/react-transition-group/).\n\n## Accessibility\n\nIf you're driving home for the ultimate accessible modal, make sure to use `aria-labelledby` and `aria-describedby`, for title and description of the modal, like so:\n\n```javascript\n\u003cBestModal\n  onRequestClose={closeModal}\n  appRoot={appRoot}\n  aria-labelledby=\"modal-title\"\n  aria-describedby=\"modal-description\"\n\u003e\n  \u003cbutton onClick={closeModal}\u003eclose\u003c/button\u003e\n  \u003ch2 id=\"modal-title\"\u003eHello, World!\u003c/h2\u003e\n  \u003cp id=\"modal-description\"\u003eThis is a modal, hello worlding!\u003c/p\u003e\n\u003c/BestModal\u003e\n```\n\n### Pro tips\n\n* Have an element that is focusable (for example there is a button above).\n* Make sure to embrace `aria-labelledby` and `aria-describedby`.\n\n## Focus\n\n* Focus will be trapped inside the modal when mounted.\n* Focus will automatically jump to the modal's first element when mounted, and will return to the previous focused element when unmounted.\n\n## Multiple modals (modals in modals)\n\nThis isn't supported. It's also bad practice to show many modals at a time.\n\n## API\n\n### `BestModal`\n\n```javascript\nimport BestModal from 'react-best-modal';\n```\n\n#### Props\n\n| prop             | type                       | required | description                                                                                     |\n| ---------------- | -------------------------- | -------- | ----------------------------------------------------------------------------------------------- |\n| children         | ReactNode                  | yes      | Your modal markup.                                                                              |\n| onRequestClose   | (e: KeyboardEvent) =\u003e void | yes      | Callback when the modal wants to close. Up to you to action it.                                 |\n| appRoot          | HTMLElement                | yes      | Root of your application. The modal will add and remove accessible attributes when appropriate. |\n| className        | string                     | no       |                                                                                                 |\n| disableFocusLock | boolean                    | no       | Disables focus lock. Useful if something else wants to trap focus.                              |\n\nAll other props that are valid on a `HTMLElement` are passed through.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Freact-best-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdouges%2Freact-best-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Freact-best-modal/lists"}