modal

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

123,382

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

20 KB

Callback fired when the component requests to be closed.

Informational Components

Modal

React

UI Components

2 contributors

Install modal as a package?

Copied

npm i @bit/mui-org.material-ui.modal

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

Callback fired when the component requests to be closed.

Modal is a lower-level construct that is leveraged by the following components:

If you are creating a modal dialog, you probably want to use the Dialog component rather than directly using Modal.

This component shares many concepts with react-overlays. Demos:

Modal

API:

Modal API

Modal is a lower-level construct that is leveraged by the following components:

If you are creating a modal dialog, you probably want to use the Dialog component rather than directly using Modal.

This component shares many concepts with react-overlays.

Properties

Name	Type	Description
BackdropComponent	`elementType`	A backdrop component. This prop enables custom backdrop rendering.
BackdropProps	`object`	Props applied to the `Backdrop` element.
children	`custom`	A single child content element.
closeAfterTransition	`bool`	When set to true the Modal waits until a nested Transition is completed before closing.
container	`object \| function`	A node, component instance, or function that returns either. The `container` will have the portal children appended to it.
disableAutoFocus	`bool`	If `true`, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the `disableAutoFocus` prop. Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers.
disableBackdropClick	`bool`	If `true`, clicking the backdrop will not fire any callback.
disableEnforceFocus	`bool`	If `true`, the modal will not prevent focus from leaving the modal while open. Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers.
disableEscapeKeyDown	`bool`	If `true`, hitting escape will not fire any callback.
disablePortal	`bool`	Disable the portal behavior. The children stay within it’s parent DOM hierarchy.
disableRestoreFocus	`bool`	If `true`, the modal will not restore focus to previously focused element once modal is hidden.
disableScrollLock	`bool`	Disable the scroll lock behavior.
hideBackdrop	`bool`	If `true`, the backdrop is not rendered.
keepMounted	`bool`	Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal.
manager	`object`
onBackdropClick	`function`	Callback fired when the backdrop is clicked.
onClose	`function`	The event source of the callback.
onEscapeKeyDown	`function`	Callback fired when the escape key is pressed, `disableEscapeKeyDown` is false and the modal is in focus.
onRendered	`function`	Callback fired once the children has been mounted into the `container`. It signals that the `open={true}` prop took effect. This prop will be deprecated and removed in v5, the ref can be used instead.
open (required)	`bool`	If `true`, the modal is open.
invisible	`bool`	If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component.
open (required)	`bool`	If `true`, the backdrop is open.
children (required)	`element`	A single child content element.
disableAutoFocus	`bool`	If `true`, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the `disableAutoFocus` prop. Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers.
disableEnforceFocus	`bool`	If `true`, the modal will not prevent focus from leaving the modal while open. Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers.
disableRestoreFocus	`bool`	If `true`, the modal will not restore focus to previously focused element once modal is hidden.
getDoc (required)	`function`	Return the document to consider. We use it to implement the restore focus between different browser documents.
isEnabled (required)	`function`	Do we still want to enforce the focus? This prop helps nesting TrapFocus elements.
open (required)	`bool`	If `true`, the modal is open.