Basic example
The following example is taken directly from the SPA example, with minimal changes.
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
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: