Modal
The Modal component lets you create dialogs, popovers, lightboxes, and other elements that force the user to take action before continuing.
useModal API
Import
import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
// or
import { unstable_useModal as useModal } from '@mui/base';
Name | Type | Default | Description |
---|---|---|---|
children* | React.ReactElement | undefined | null | A single child content element. | |
open* | boolean | If | |
rootRef* | React.Ref<Element> | ||
closeAfterTransition | boolean | false | When set to true the Modal waits until a nested Transition is completed before closing. |
container | PortalProps['container'] | An HTML element or function that returns one. The | |
disableEscapeKeyDown | boolean | false | If |
disableScrollLock | boolean | false | Disable the scroll lock behavior. |
onClose | { bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void }['bivarianceHack'] | Callback fired when the component requests to be closed. The | |
onKeyDown | React.KeyboardEventHandler | ||
onTransitionEnter | () => void | A function called when a transition enters. | |
onTransitionExited | () => void | A function called when a transition has exited. |
Name | Type | Default | Description |
---|---|---|---|
exited | boolean | If | |
getBackdropProps | <TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalBackdropSlotProps<TOther> | Resolver for the backdrop slot's props. | |
getRootProps | <TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalRootSlotProps<TOther> | Resolver for the root slot's props. | |
getTransitionProps | <TOther extends EventHandlers = {}>(externalProps?: TOther) => { onEnter: () => void; onExited: () => void } | Resolver for the transition related props. | |
hasTransition | boolean | If | |
isTopModal | () => boolean | If | |
portalRef | React.RefCallback<Element> | null | A ref to the component's portal DOM element. | |
rootRef | React.RefCallback<Element> | null | A ref to the component's root DOM element. |