Dialog: React
To draw attention of the user to a dedicated piece of content, you can use a Dialog.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Dialog } from '@mediahuis/chameleon-react';
export default function Example() {
return <Dialog show={true}>Hello World</Dialog>;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
accessibilityLabelCloseButton | String | 'Close' | No | Sets the accessibility label for the close button. |
allowOutsideClick | Boolean | Unknown | false | No | If set and is or returns true, a click outside the focus trap will not be prevented (letting focus temporarily escape the trap, without deactivating it), even if clickOutsideDeactivates=false. More info: https://github.com/focus-trap/focus-trap |
children | ReactNode | - | No | The content of the Dialog. |
closeOnBackdropClick | Boolean | true | No | Determines whether the user can hide the dialog by clicking on the backdrop. |
closeOnEscape | Boolean | true | No | Determines whether the user can hide the dialog by pressing `Escape`. |
footer | ReactNode | - | No | The contents of the footer. |
headerHidden | Boolean | false | No | Hides the Dialog's header. |
lockBodyOnScroll | Boolean | true | No | Determines whether the user can scroll the document body when the dialog is visible. |
onClose | Function | - | No | The event handler function triggered when the dialog is closed. |
show | Boolean | false | No | Determines whether the Dialog is shown or hidden. |