Modal

Usage

import { Modal } from 'nr1'

ariaLabelledBystring

Pass the string of the text content which should better describe the purpose of the modal to be correctly announced by screen readers.

childrennode

Content to render inside the modal.

classNamestring

Appends class names to the component.

hiddenboolean

DEFAULT

false

If true, the modal is hidden.

onCloserequiredfunction

Callback fired when clicking on the Modal's close button.

onHideEndfunction

Callback fired when the Modal finishes the closing animation.

Use this to unmount the Modal component. This ensures that the closing animation works properly.

onHideStartfunction

Callback fired when the Modal starts the closing animation.

onShowEndfunction

Callback fired when the Modal finishes the opening animation.

onShowStartfunction

Callback fired when the Modal starts the opening animation.

styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.