Overlay

Install

yarn add @ntds/Overlay

import { Overlay } from '@ntds/overlay';

Prop	Type	Default	Description
`important?`	`boolean`	`false`	If the dialog is considered important (relative to its "siblings") If set to true: - Will be placed in front of any non-important sibling - Will be placed behind the first important sibling If set to false (default): - Will be placed behind all siblings
`show`	`boolean`	—	Show/hide the modal
`onClose`	`() => void`	—	Calling this will close the Overlay Typically this will call a local set state in the application.
`nested?`	`ReactNode`	—	Nested Dialog/Sheet/Overlay components 🔥 IMPORTANT: ALWAYS put other Dialog/Sheet/Overlay inside this prop. If they are put inside `children` they will not be accessible to assistive technologies because dialogs sets aria-hidden to its content!
`header?`	`ReactNode`	—	Optional header element that follow the same transition effects as the rest of the overlay.
`children`	`ReactNode`	—	Any valid ReactNode.
`backdropElements?`	`ReactNode`	—	Optional additional elements to be added to the backdrop.
`twBackdropOpacity?`	`string`	`bg-opacity-60`	Opacity of the overlay backdrop color.
`twBackdropColor?`	`string`	`bg-black`	Color of the overlay backdrop.
`id?`	`string`	—	Plain id