Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Installation
npm i @huin-core/react-dialogAPI Reference
Dialog
| Prop | Type | Description |
|---|---|---|
| defaultOpen | boolean | Determines whether the component should be open by default when it is initially rendered. |
| open | boolean | Controls the open state of the component. When set to true, the component is displayed; when false, it is hidden. |
| modal | boolean | The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. |
| onOpenChange | function | Event handler called when the open state of the component changes. |
DialogTrigger
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DialogPortal
| Prop | Type | Description |
|---|---|---|
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
DialogOverlay
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
DialogContent
| Prop | Type | Description |
|---|---|---|
| variant | "center" | "top" | "right" | "bottom" | "left" | Defines a different style or appearance of the component, allowing for customization of its look and feel based on specific use cases. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
| onOpenAutoFocus | function | Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault. |
| onCloseAutoFocus | function | Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault. |
| onEscapeKeyDown | function | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. |
| onPointerDownOutside | function | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault |
| onInteractOutside | function | Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. |
DialogHeader
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DialogTitle
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DialogDescription
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DialogFooter
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
Keyboard Interactions
| Key | Description |
|---|---|
Space Enter | Opens the dialog from its trigger. |
Tab | Moves focus to the next element, trapped inside the dialog. |
Shift Tab | Moves focus to the previous element. |
Esc | Closes the dialog and returns focus to the trigger. |