Modal

Description

The Modal Component provides an accessible, focus-managed modal dialog overlay. It supports keyboard navigation, focus trapping, and screen reader accessibility, ensuring that all users can interact with the modal content efficiently.

The component consists of two parts: ModalContent for the content of the modal and ModalWrapper for managing the modal's overlay and focus scope.

Components properties

ModalContent Properties

| Property Name | Property Description | Property Type | IsRequired | | ------------- | ----------------------------------------------- | ------------- | ---------- | | titleId | ID for the modal title, used for accessibility. | string | [x] | | title | Text for the modal title. | string | [x] | | onClose | Callback function for when the modal is closed. | function | | | children | Content to be displayed inside the modal. | ReactNode | |

ModalWrapper Properties

| Property Name | Property Description | Property Type | IsRequired | | ------------- | ----------------------------------------------- | ----------------- | ---------- | | titleId | ID for the modal title, used for accessibility. | string | [x] | | title | Text for the modal title. | string | [x] | | onClose | Callback function for when the modal is closed. | function | | | children | Content to be displayed inside the modal. | ReactNode | | | className | Overwrite ClassName | classNameOverride | |

For more information about className please visit packages/utility/functions/src/generateClasses.js

Props Example:

<ModalWrapper titleId="customModalTitle" title="Modal Title">
  <ModalContent>
    <p>Modal Content</p>
  </ModalContent>
</ModalWrapper>

Usage

Install the package by running: npm i @squiz/xaccel-modal

import { Modal as ModalWrapper, ModalContent } from '@squiz/xaccel-modal';

function SomeReactComponent() {
    const handleClose = () => {
        console.log("Modal closed.");
    };

    return (
        <ModalWrapper
            titleId="id1"
            title="Modal Title"
            onClose={handleClose}
        >
            <ModalContent>
                <p>Modal Content</p>
            </ModalContent>
        </ModalWrapper>
    );
}