@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
28 lines (18 loc) • 1.57 kB
Markdown
# Modal
Import: `import { Modal } from '@neo4j-ndl/react'`
## Props
### Modal
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ | | Content to render inside the Modal. |
| `container` | `Element` | | | The container where the modal will be rendered. |
| `isOpen` | `boolean` | ✅ | | Whether the Modal is open. |
| `onClose` | `((e: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>, reason?: ModalCloseReason) => void)` | | | Callback function called when the modal is closed. |
| `ref` | `Ref<HTMLDivElement>` | | | A ref to apply to the root element. |
| `rootProps` | `HtmlAttributes<"div">` | | | Forwards the props to the modal container's wrapper - use with caution |
| `size` | `'large' \| 'medium' \| 'small' \| 'unset'` | | `medium` | Sets the size(max-width) of the Modal, use 'unset' for custom sizing. |
Where `Element` is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
Where `HtmlAttributes<"div">` is a type that includes all standard HTML div element attributes plus any custom data attributes (like data-testid or data-value) that follow the data-* pattern.
## Accessibility
## Implementation guidelines
The Modal component follows WAI-ARIA dialog pattern guidelines. Includes features such as focus trapping, keyboard navigation support, and proper ARIA roles for enhanced accessibility.