Accessible React Dialog

Dialogs in React are something that I have never fancied. The available open-source libraries out there don't really fit my need as they either do too little, too much, or simply do the wrong thing. I want my dialog library to be:

• Accessible
• Simple to style
• Not forcing me to include an extra .css file
• Usable with default config
• Be promise based
• Callable via functions, not as JSX elements
• Provide alternatives to the native alert() and confirm()
• Do nothing else. No magical image slideshow gallery thingy. I don't want a myriad of different transitions options.

After a long time researching and evaluating, I concluded that no libraries out there do exactly this, and so I decided to create one for Crystallize. Using the excellent a11y-dialog as the base, it does not require much code to give me exactly what I want!

Lo and behold, @crystallize/react-dialog was created. I am not going into the details of how the library is created, you can dive into the source code here if you like.

When creating the module, the exposed API is the most important, and here it is:

import { Wrapper } from '@crystallize/react-dialog';

<App>
  <Main />
  <Wrapper />
</App>

Wrapper is the element that will mount all the dialogs displayed. Just throw it in anywhere in your application, preferably high up in the DOM tree.
You are now ready to call the dialog!

import { showDialog, showAlert, showConfirm } from '@crystallize/react-dialog';

<button onClick={() => showDialog('Hello there')}>Greet me</button>

<button onClick={() => {
  showAlert({
    title: 'Oh no!',
    body: <em>Failure</em>
  })
}}>Alert me</button>

<button onClick={async () => {
  const response = await showConfirm('Do you agree?');
  showAlert(`Your response: "${response}"`);
}}>Ask me</button>

That is all it takes! Go ahead and give it a try, and also check out the demo page!