#Modal

import Modal from "@poodle/ui/Modal";

Use the <Modal /> component when we need to ask the user for an important decision or want them to focus on the information displayed.

Normally, the component will block the app until it disappears, so we shouldn't overuse it.

#Basic

The <Modal /> component using focus-trap-react to keep the user focus on the modal. So it will require at least one focusable element on the modal. You can turn the focus trap off with the disableFocusTrap prop.

#Accessibility

In the basic example, the code has already added aria-labelledby, aria-describedby, and title ID to support accessibility.

However, by doing so it might be cumbersome. Using withAutoId prop will automatically insert the required attribute on Modal, ModalHeader, ModalBody components.

If you don't use ModalHeader, ModalBody then you shouldn't use the withAutoId prop.

#Color

By default, some modal components support color style primary, negative, warn, positive.

#Theming

Please check theming component document here.

export type ModalStyleKeys =
  | "root"
  | "overlay"
  | "inner"
  | "container"
  | "modal"


export interface ModalThemeConfig
  extends StandardThemeConfig<ModalStyleKeys, ModalProps> {}

#Props

#Local Props

NameTypeDescription
childrenReact.ReactNode
containerElementsFocusTrapArray<HTMLElement>The elements will be used as the boundaries for the focus-trap,
instead of the child.
containerPropsBoxPropsCustom props for container element.
disableFocusTrapbooleanTurn off focus trap.
focusTrapOptionsFocusTrapOptionsPass any of the options available in focus-trap's createOptions.
innerPropsBoxPropsCustom props for inner element.
isOpenbooleanOpen the modal when true.
modalPropsBoxPropsCustom props for modal element.
onRequestClose(cause: "outside" \| "esc") => voidCallback called when the user tries to close the modal.

It can be caused by click on outside the modal or press escape key.
overlayPropsBoxPropsCustom props for overlay element.
pausedFocusTrapbooleanPause or unpause focus trap
portalPropsOmit<PortalProps, "mount">Custom props for <Portal />.
rootPropsBoxPropsCustom props for root element.
withAutoIdbooleanAdd autoId

#Full Props

export interface ModalProps
    extends BoxProps,
        StandardComponentProps,
        LocalModalProps {}