Drawer

A side content overlay show above the page content.

Anatomy

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

Context and non-modal drawers

You can pass any content to the drawer. If you have a custom react component and you want to close the Drawer from inside, you can get the onClose callback from OverlayContext.

In the following example we're going to use a custom component as Drawer's content, that will close the drawer when the user clicks on the button. We're also creating a non-modal drawer, which allows interactions with the rest of the page (the closeOnClickOutside property is ignored when isModal is false)

import {
  Drawer,
  Overlay,
  useOverlayContext,
  Button,
  Title,
} from "@lualtek/react-components";
 
export const CustomDrawerContent = () => {
  const { onClose, titleId } = useOverlayContext();
 
  return (
    <Stack hPadding={24} vPadding={24} rowGap={32}>
      <Title id={titleId} level="4">
        My custom drawer title
      </Title>
      <Button onClick={onClose} icon="xmark">
        Close drawer
      </Button>
    </Stack>
  );
};
 
export const PageExample = () => {
  const [visible, setVisible] = useState(false);
 
  return (
    <>
      <Button onClick={() => setVisible(true)}>Show drawer</Button>
      <Drawer
        isOpen={visible}
        isModal={false}
        onClose={() => setVisible(false)}
      >
        <CustomDrawerContent />
      </Drawer>
    </>
  );
};

API Reference

export type DrawerProps = {
  /**
   * This enable the drawer 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 drawer.
   *
   * @important This property is considered only when `isModal` is `true`.
   * @default true
   */
  closeOnClickOutside?: boolean;
 
  /**
   * Set the accessible title of the drawer. This is used by screen readers to
   * announce the title of the drawer when opened.
   */
  title?: ReactNode;
 
  /**
   * Hide or show the drawer header which includes the title and the close button.
   * If you hide the title, make sure to add yuor own title element in order
   * to provide an accessible label to the drawer.
   * @default true
   */
  showHeader?: boolean;
 
  /**
   * Set the maximum width of the drawer, on mobile the drawer will be
   * automatically collapsed when the width is reached.
   * @default '400px'
   */
  maxWidth?: string;
 
  /**
   * 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 side on which the drawer will be positioned.
   * @default 'right'
   */
  side?: "left" | "right";
 
  /**
   * Disable the modal behavior of the drawer.
   * If `false`, disable the prop `closeOnClickOutside` and
   * the page is not blocked when the drawer is open.
   * @default true
   */
  isModal?: boolean;
 
  /**
   * Enable or disable autofocus on the first focusable element inside the drawer.
   */
  autoFocus?: boolean;
 
  /**
   * Set the visibility of the modal
   */
  isOpen?: boolean;
 
  /**
   * The callback function that is called when the modal is closed.
   */
  onClose: () => void;
};

Text Chip Info State