Crystallize logo

React Dialog

React component to display accessible dialogs.

Read how to get started with accessible React dialogs.

React Dialog


yarn add @crystallize/react-dialog styled-components

In your app root

import { Wrapper } from '@crystallize/react-dialog';export default () => (  <main>    <YourApp />  </main>  <Wrapper />);

Use it

import { showDialog, showAlert, showConfirm, closeCurrent } from '@crystallize/react-dialog';await showDialog('Hey dude');await showDialog({  body: <strong>Hey dude</strong>});await showAlert('Wow');const confirmResult = await showConfirm('Are you sure?');const confirmResult = await showConfirm({  body: <div>JSX rules</div>,  buttons: {    ok: p => <button {...p}>Allrighty</button>,    cancel: p => <button {...p}>Nope</button>  }});// Closes any open dialogcloseCurrent();