React A11yDialog
react-a11y-dialog is a React component for a11y-dialog relying on React portals 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.
This is a fork of Hugo Giraudel's 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.
Changes in this Fork
- Includes TypeScript definition file
- Added new
onClose()callback to theDialogcomponent to allow for notifications of when a dialog was closed.
Install
npm install --save @allejo/react-a11y-dialog
Example
import * as React from 'react';
import { Dialog, A11yDialog } from '@allejo/react-a11y-dialog';
class MyComponent extends React.Component {
private dialog?: A11yDialog;
handleClick = () => {
this.dialog && this.dialog.show()
}
render () {
return (
<div>
<button type="button" onClick={this.handleClick}>
Open the dialog
</button>
<Dialog
id="my-accessible-dialog"
appRoot="#main"
dialogRoot="#dialog-root"
dialogRef={(dialog) => (this.dialog = dialog)}
title="The dialog title"
onClose={() => console.log('I was closed!')}
>
<p>Some content for the dialog.</p>
</Dialog>
</div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('main')
)<!doctype html>
<html lang="en">
<body>
<div id="main">
<!-- Container in which the entire React application is rendered. -->
</div>
<div id="dialog-root">
<!-- Container in which dialogs are rendered through a React portal. -->
</div>
</body>
</html>API
Take a look at the Props interface in the index.tsx for all of the available props and their relevant documentation.