Usage
Center modal vertically
Remove header
To remove header set withCloseButton={false}
:
Change size
You can change modal width by setting size
prop to predefined size or any valid width, for example, 55%
or 50rem
.
Modal
width cannot exceed 100vw
.
Size auto
Modal
with size="auto"
will have width to fit its content:
Fullscreen
Fullscreen modal will take the entire screen, it is usually better to change transition to fade
when fullScreen
prop is set:
To switch Modal to fullscreen on devices with small screens only use use-media-query hook.
size
prop is ignored if fullScreen
prop is set:
Customize overlay
Modal
uses Overlay component, you can set any props that Overlay
supports with overlayProps
:
Modal with scroll
Usage with ScrollArea
Change offsets
Use xOffset
/yOffset
to configure horizontal/vertical content offsets:
Change transitions
Modal
is built with Transition component. Use transitionProps
prop to customize any Transition properties:
Initial focus
Modal uses FocusTrap to trap focus. Add data-autofocus
attribute to the element that should receive initial focus.
If you do not want to focus any elements when the modal is opened, use FocusTrap.InitialFocus
component to create a visually hidden element that will receive initial focus:
If you do not add data-autofocus
attribute and do not use FocusTrap.InitialFocus
,
modal will focus the first focusable element inside it which is usually the close button.
Control behavior
The following props can be used to control Modal
behavior.
In most cases, it is not recommended to turn these features off –
it will make the component less accessible.
trapFocus
– determines whether focus should be trapped inside modalcloseOnEscape
– determines whether the modal should be closed whenEscape
key is pressedcloseOnClickOutside
– determines whether the modal should be closed when user clicks on the overlayreturnFocus
– determines whether focus should be returned to the element that was focused before the modal was opened
react-remove-scroll settings
Modal
uses react-remove-scroll
package to lock scroll. You can pass props down to the RemoveScroll
component
with removeScrollProps
:
Change close icon
Use closeButtonProps
to customize close button:
Compound components
You can use the following compound components to have full control over the Modal
rendering:
Modal.Root
– context providerModal.Overlay
– render OverlayModal.Content
– main modal element, should include all modal contentModal.Header
– sticky header, usually containsModal.Title
andModal.CloseButton
Modal.Title
–h2
element,aria-labelledby
ofModal.Content
is pointing to this element, usually is rendered insideModal.Header
Modal.CloseButton
– close button, usually rendered insideModal.Header
Modal.Body
– a place for main content,aria-describedby
ofModal.Content
is pointing to this element
Fixed elements offset
Modal
component uses react-remove-scroll
package to lock scroll. To properly size these elements
add a className
to them (documentation):
Accessibility
Modal
component follows WAI-ARIA recommendations on accessibility.
Set title
props to make component accessible, will add aria-labelledby
to the content element:
To set close button aria-label
use closeButtonProps
: