{"_id":"@allejo/react-a11y-dialog","_rev":"3-0adb3f5b697de7bfb48ad2a6833f361e","name":"@allejo/react-a11y-dialog","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@allejo/react-a11y-dialog","version":"1.0.0","keywords":["modal","dialog","accessibility","a11y","focus","react","component"],"author":{"url":"http://hugogiraudel.com","name":"Hugo Giraudel"},"license":"MIT","_id":"@allejo/react-a11y-dialog@1.0.0","maintainers":[{"name":"allejo","email":"me@allejo.io"}],"homepage":"https://github.com/allejo/react-a11y-dialog","bugs":{"url":"https://github.com/allejo/react-a11y-dialog/issues"},"dist":{"shasum":"4d6d7568895dd674d8a6d9fa7ace97b5ff9843a1","tarball":"https://registry.npmjs.org/@allejo/react-a11y-dialog/-/react-a11y-dialog-1.0.0.tgz","fileCount":5,"integrity":"sha512-k6uDXOd4OvZ3MQyZbT7mAzneIs4tsbTkakBABenYQLGJyhItlDqYAD9kxOj3q40I8gReOksd9JUJ/ewAvEPKwA==","signatures":[{"sig":"MEQCICIfjwxLMujqAw6uFY6vOqtR5yiZm5JhW0BVpeO5yCVOAiAk4i7aIXqVMt5y6D4MofR14Cx23vhOy4G4szJQDDCe5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6B7cCRA9TVsSAnZWagAAEEAP/jua01A9DL73OkB+xRIm\nAoCu5gLprwX0EeLPYgquJb5vdhvH56Wddc5ql+o+yrySWUj7uru3L/ykAZ04\nf+ny1+fjfxUxSRUxH5cm8mTyrz8/qQ1znGvTz3ZkGhwOr7Jg0Kv3o2sE9bzg\nlL2QC7TLi2JSAcX/fB4xr0UKPALx3YwoGWM97xp6yxdQFNjY/ctXGv8vkZel\nZfk7fB83yYdoioTRhv8aDCCBP8bEJ7p78eJWkVqLGv87HUE0jeQ+cunyTLVY\npVnPmeGNOU8YtW969miciZoByQwhI+64LpfnHYLBwSdRWPuOJigOqmG/JSLT\n6c0NhQuP1but1HxC4MxRnUDXQVpzWA6t9E6kdGpXxc3fBSbkRRnpoM0Dvp6L\nFakS1vKp4IhakczQVoZ0nWSLHZryqPsKS3tbec1QK3vWHDo/sNWB0uciARrX\n//BEUeOEMVe6NlZQZXFvipBjj9wbPW+NLmmh2lqHTJNK7WpSGzbAaO+p14fU\nE9fgUmjPZO9Oz8n9oppMq2Sl7zfLkFO1dMDNEinG9jgMb2hdhSxq0XTASnnP\n7qFJu4hs1p37NQc23ECZncGhewDSrM+6v0NbmAJVyEl/2qCQ5q7mK7JqnOZg\nkAsgrMICzHRIPinT5A0KTjB4Q+Dzc1HhSx2zFlBmBO4P4kWSDg4OXaUb5uFf\n0aiM\r\n=G1Ej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:allejo-react-a11y-dialog-1.0.0.tgz","private":false,"scripts":{"build":"npm run compile:ts && npm run compile:babel","start":"babel build/index.js -o dist/index.js -w","prepare":"npm run build","prettify":"prettier --write *.{json,ts,tsx}","compile:ts":"tsc","compile:babel":"babel build/index.jsx -o dist/index.js"},"typings":"dist/index.d.ts","_npmUser":{"name":"allejo","email":"me@allejo.io"},"_resolved":"","_integrity":"","repository":{"url":"git+https://github.com/allejo/react-a11y-dialog.git","type":"git"},"_npmVersion":"6.4.1","description":"A React component wrapper around a11y-dialog.","directories":{},"_nodeVersion":"8.11.3","dependencies":{"a11y-dialog":"^5.2.0","@types/a11y-dialog":"^5.2.0"},"_hasShrinkwrap":false,"devDependencies":{"prettier":"^1.17.1","babel-cli":"^6.26.0","typescript":"^3.4.5","@types/react":"^16.8.18","@types/react-dom":"^16.8.4","babel-preset-env":"^1.6.0","babel-plugin-transform-react-jsx":"^6.24.1"},"peerDependencies":{"react":">=16.0.0","react-dom":">=16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-a11y-dialog_1.0.0_1558716123655_0.4453220567303928","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2019-05-24T16:42:03.626Z","modified":"2026-01-04T23:27:27.620Z","1.0.0":"2019-05-24T16:42:03.775Z"},"bugs":{"url":"https://github.com/allejo/react-a11y-dialog/issues"},"author":{"url":"http://hugogiraudel.com","name":"Hugo Giraudel"},"license":"MIT","homepage":"https://github.com/allejo/react-a11y-dialog","keywords":["modal","dialog","accessibility","a11y","focus","react","component"],"repository":{"url":"git+https://github.com/allejo/react-a11y-dialog.git","type":"git"},"description":"A React component wrapper around a11y-dialog.","maintainers":[{"name":"allejo","email":"me@allejo.io"}],"readme":"# React A11yDialog\n\nreact-a11y-dialog is a React component for [a11y-dialog](https://github.com/edenspiekermann/a11y-dialog) relying on [React portals](https://reactjs.org/docs/portals.html) to ease the use of accessible dialog windows in React applications. This component does not render anything on the server, and waits for the client bundle to kick in to render the dialog through the React portal.\n\nThis is a fork of [Hugo Giraudel's](https://github.com/HugoGiraudel/react-a11y-dialog) project ported over to TypeScript and includes any minor changes/improvements I needed. Version 1.0.0 of this project is the equivalent of what would be react-a11y-dialog 4.1.1, meaning this project can be a drop in replacement.\n\n## Changes in this Fork\n\n- Includes TypeScript definition file\n- Added new `onClose()` callback to the `Dialog` component to allow for notifications of when a dialog was closed.\n\n## Install\n\n```\nnpm install --save @allejo/react-a11y-dialog\n```\n\n## Example\n\n```jsx\nimport * as React from 'react';\nimport { Dialog, A11yDialog } from '@allejo/react-a11y-dialog';\n\nclass MyComponent extends React.Component {\n  private dialog?: A11yDialog;\n\n  handleClick = () => {\n    this.dialog && this.dialog.show()\n  }\n\n  render () {\n    return (\n      <div>\n        <button type=\"button\" onClick={this.handleClick}>\n          Open the dialog\n        </button>\n\n        <Dialog\n          id=\"my-accessible-dialog\"\n          appRoot=\"#main\"\n          dialogRoot=\"#dialog-root\"\n          dialogRef={(dialog) => (this.dialog = dialog)}\n          title=\"The dialog title\"\n          onClose={() => console.log('I was closed!')}\n        >\n          <p>Some content for the dialog.</p>\n        </Dialog>\n      </div>\n    )\n  }\n}\n\nReactDOM.render(\n  <MyComponent />,\n  document.getElementById('main')\n)\n```\n\n```html\n<!doctype html>\n<html lang=\"en\">\n  <body>\n    <div id=\"main\">\n      <!-- Container in which the entire React application is rendered. -->\n    </div>\n    <div id=\"dialog-root\">\n      <!-- Container in which dialogs are rendered through a React portal. -->\n    </div>\n  </body>\n</html>\n```\n\n## API\n\nTake a look at the `Props` interface in the [`index.tsx`](./index.tsx) for all of the available props and their relevant documentation.\n","readmeFilename":"README.md"}