No description or website provided.

React A11yDialog

react-a11y-dialog is a React component for a11y-dialog meant to ease the use of accessible dialog windows in React applications.


npm install --save react-a11y-dialog


There are 3 required properties for the dialog component:

  • id: the id attribute used internally by a11y-dialog to control the element.
  • title: the text content for the title of the dialog.
  • dialogRef: a function that receive the A11yDialog instance so it can be interacted with.
const Dialog = require('react-a11y-dialog')

const MyComponent = React.createClass({
  handleClick: function () {

  render: function () {
    return (
        <button type="button" onClick={this.handleClick}>
          Open the dialog

        <Dialog id="my-accessible-dialog"
                dialogRef={(dialog) => (this.dialog = dialog)}
                title="The dialog title">
          <p>Some content for the dialog.</p>

  <MyComponent />,


Note that the actual dialog element will be moved on componentDidMount so it lives outside of your application main container. For more information about why this is necessary, refer to a11y-dialog documentation.