zidanecomponents/Overlay
import { … } from 'zidane-ui'ui/src/components/Overlay.tsx
Components#
OverlayComponent#
Renders a layer above the page through a portal: a scrim that fades in and out, with the
surface drawn by children. It adds scroll lock, Esc to close, focus return on close and,
with trapFocus, a modal focus trap that makes the rest of the page inert. The layer stays
mounted until the scrim's exit finishes.
function Overlay(props: OverlayProps): ReactPortal | nullParameters
| Name | Type | Description |
|---|---|---|
| props | OverlayProps | Component props. |
Returns
ReactPortal | nullProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | (state: 'open' | 'closed') => ReactNode | Renders the surface. It receives | |
| className? | string | Position of the layer (the scrim fills it). | |
| closeOnEscape? | boolean | true | Close the layer on Esc while it is the topmost layer. |
| exitMs?deprecated | number | Exit duration in milliseconds. Ignored. Deprecated. The exit lasts as long as its motion; kept so older callers compile. | |
| inertSelector? | string | Elements made | |
| onClose | () => void | Called when the scrim is clicked, or on Esc when | |
| open | boolean | Whether the layer is shown. | |
| scrimClassName? | string | '' | Extra classes on the scrim. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| trapFocus? | boolean | true | Make the layer modal: focus moves in on open, Tab stays inside, and the rest of |
Functions#
useLayerFunction#
The behaviour of a layer whose root (layerRef, a child of body) is
portaled by the caller: scroll lock, stacking, Esc, focus and the inert
background, as described above. Overlay and Lightbox both run on it.
Returns whether this layer is the topmost one right now, for a caller
that handles more keys of its own.
function useLayer(
open: boolean,
layerRef: RefObject<HTMLElement | null>,
options?: LayerOptions,
): () => booleanParameters
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | Whether the layer is open. Scroll lock, stacking, Esc handling and the focus trap run only while it is. | |
| layerRef | RefObject<HTMLElement | null> | Ref to the layer's root element, a child of | |
| options? | LayerOptions | {} | Esc handling, focus trap and inert background options, see |
Returns
() => booleanInterfaces#
LayerOptionsInterface#
Options of useLayer.
interface LayerOptionsProperties
| Name | Type | Description |
|---|---|---|
| inertSelector? | string | Elements made |
| initialFocus? | RefObject<HTMLElement | null> | Where focus lands on open when nothing inside took it already; else the first control, else the layer. |
| onEscape? | () => void | Called on Esc while this is the topmost layer. Omit to leave Esc alone (it still never reaches a layer below). |
| trapFocus? | boolean | Modal: focus moves in, Tab stays in, the rest of |
OverlayPropsInterface#
Props for Overlay.
interface OverlayPropsProperties
| Name | Type | Default | Description |
|---|---|---|---|
| children | (state: 'open' | 'closed') => ReactNode | Renders the surface. It receives | |
| className? | string | Position of the layer (the scrim fills it). | |
| closeOnEscape? | boolean | true | Close the layer on Esc while it is the topmost layer. |
| exitMs?deprecated | number | Exit duration in milliseconds. Ignored. Deprecated. The exit lasts as long as its motion; kept so older callers compile. | |
| inertSelector? | string | Elements made | |
| onClose | () => void | Called when the scrim is clicked, or on Esc when | |
| open | boolean | Whether the layer is shown. | |
| scrimClassName? | string | '' | Extra classes on the scrim. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| trapFocus? | boolean | true | Make the layer modal: focus moves in on open, Tab stays inside, and the rest of |