HTML native dialogs in React

Basic example

The following example is taken directly from the SPA example, with minimal changes.

Dialog title

This text will change when you update the dialog.

Dropdowns

Dialogs and dropdowns have much in common, but there are some differences. Dropdowns are usually tied to an anchor element, while dialogs are shown at the center of the screen. Dropdowns can also be placed on each side of the anchor element. Calculating the positioning of these elements is a full-time job, so instead of creating my own solution, I've decided to use the excellent @floating-ui/react-domlibrary.

* Dropdowns use useFloating() hook from @floating-ui/react-dom to position themselves, and you can choose any of the middlewares they support.

The examples above use shift(), offset(),flip() and arrow().

Embed other components

September 2024
SuMoTuWeThFrSa

Selected Date is:

Credit where credit's due

While I was working on this library, I've used the works of others, mostly from these sources:

  1. MDN Web Docs on dialog element
  2. Rob Levin's excellent article on CSS Tricks
  3. HTML Spec for the dialog element
  4. This hook by Samuel J. Cook