Layout
Overlay

Overlay

Render content above everything

View source

Anatomy

import { Overlay } from "@lualtek/react-components";
 
export default () => {
  return <Overlay>...</Overlay>;
};

Using overlay context

In some cases you may need to control the visibility of the overlay from inside a child component. This can be done by using the useOverlayContext hook.

import { Overlay, useOverlayContext } from "@lualtek/react-components";
 
const ChildComponent = () => {
  const { titleId, onClose } = useOverlayContext();
 
  return (
    <>
      {/* TitleId is for accessibility to describe the overlay with a title */}
      <Title id={titleId}>Overlay Title</Title>
      <Button onClick={onClose}>Close overlay</Button>
    </>
  );
};
 
export default () => {
  return (
    <Overlay>
      <ChildComponent />
    </Overlay>
  );
};

API Reference

export type OverlayProps = {
  /**
   * The children to render inside the overlay. This content
   * will be rendered in a React `portal`, which means that it will be
   * rendered outside of the DOM hierarchy of the parent component.
   */
  children: ReactNode;
 
  /**
   * Set the root element to render the overlay into.
   */
  root?: HTMLElement;
 
  /**
   * Set the css `z-index` of the overlay. This must be used only
   * if necessary.
   * @default 4
   */
  index?: number;
 
  /**
   * Set the overlay style. This is used to obscure the content
   * behind the overlay if `obfuscate` is `true`. If set to `auto`, the overlay
   * color is determined by the global active theme (light or dark).
   * @default 'auto'
   */
  theme?: "light" | "dark" | "auto";
 
  /**
   * The callback function that is called when the overlay is closed.
   */
  onClose?: () => void;
 
  /**
   * Set the overlay to be obscuring the page content behind it.
   * @default true
   */
  obfuscate?: boolean;
};
MasonryPanel