Modal

A window overlaid on either the primary window, rendering the content underneath inert.

Anatomy

import { Modal, Overlay } from "@lualtek/react-components";
 
export default () => {
  const [visible, setVisible] = useState(false);
 
  return (
    <Overlay onClose={() => setVisible(false)}>
      {visible && (
        <Modal>
          <Modal.Content title="Modal title">....</Modal.Content>
        </Modal>
      )}
    </Overlay>
  );
};

⚠️

You must wrap your application with ResponsiveProvider to ensure the modal is correctly rendered. Read more bout it.

Custom content

If you want to use the Modal component to show custom elements instead of the Modal.Content (which renders the card), you can pass an element inside it.

import {
  Modal,
  Overlay,
  useOverlayContext,
  Button,
  Title,
  Card,
} from "@lualtek/react-components";
 
export const CustomModalContent = () => {
  const { onClose, titleId } = useOverlayContext();
 
  return (
    <Card>
      <Title id={titleId} level="4">
        My custom modal title
      </Title>
      <Button onClick={onClose} icon="remove">
        Close modal
      </Button>
    </Card>
  );
};
 
export const PageExample = () => {
  const [visible, setVisible] = useState(false);
 
  return (
    <>
      <Button onClick={() => setVisible(true)}>Show Modal</Button>
      <Overlay onClose={() => setVisible(false)}>
        {visible && (
          <Modal>
            <CustomModalContent />
          </Modal>
        )}
      </Overlay>
    </>
  );
};

API Reference

`Modal`

export type ModalProps = {
  /**
   * This enable the modal to be closed by clicking on the overlay.
   * Even if this can be set to `false` we strongly recommend to leave
   * it to `true` as it ensures the accessibility of the modal.
   * @default true
   */
  closeOnClickOutside?: boolean;
 
  /**
   * Enable or disable autofocus on the first focusable element inside the modal.
   * @default true
   */
  autoFocus?: boolean;
};

`Modal.Content`

export type ModalProps = {
  /**
   * Set the accessible title of the modal. This is used by screen readers to
   * announce the title of the modal when opened.
   */
  title: ReactNode;
 
  /**
   * Set the theme of the content card. To ensure contrast with the default overlay color (dark),
   * this is set to `light` by default.
   * @default 'auto'
   */
  theme?: "dark" | "light" | "auto";
 
  /**
   * Set the background color for the content header
   */
  headerTint?: string;
 
  /**
   * Enable or disable content scrolling. Set to false when you want to create your own scrollable element inside the
   * modal content and prevent double scrolling.
   * @default true
   */
  scrollInside?: boolean;
};

Lightbox Popover