OverlayMask

Beta

OverlayMask create a highlight area on some DOM element with overlay.

install	yarn add @clayui/core
version
use	`import {OverlayMask} from '@clayui/core';`

Table of Contents

Example
Introduction
Area highlight
React component
Non-React component
API Reference

Example

import {Provider, Button, OverlayMask} from '@clayui/core';
import React from 'react';

export default function App() {
  const [visible, setVisible] = React.useState(false);

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Button.Group spaced>
          <Button
            displayType="secondary"
            borderless
            onClick={() => setVisible(!visible)}
          >
            Open overlay
          </Button>
          <OverlayMask onClick={() => setVisible(false)} visible={visible}>
            <Button>Button</Button>
          </OverlayMask>
        </Button.Group>
      </div>
    </Provider>
  );
}

Introduction

Create a highlight area for some element in the DOM. The component can place the highlight automatically when passing a component with forwardRef support as children, it is also possible to set the highlighted area if there is no children component.

Area highlight

React component

There are two different ways to create the highlighted area for a component, this allows the component to determine the highlight area and keep updating when there is scroll on the page. The first, set the component as the component’s children.

Snippet

<OverlayMask>
  <ClayButton>Button</ClayButton>
</OverlayMask>

Another option is for cases where it is not possible to define the component as the only child of the <OverlayMask />, define the children as a function and the ref object is passed via render props to add to the element that should get the highlight.

Snippet

<OverlayMask>
  {(ref) => (
    <>
      <ClayButton>Button A</ClayButton>
      <ClayButton ref={ref}>Button B</ClayButton>
    </>
  )}
</OverlayMask>

Non-React component

The component can be controlled ie define a highlight area for a non-React element that is not managed by React, the difference is that you need to keep the area (bounds) updated if the page exists scroll.

Snippet

const logo = document.body.querySelector('.logo');
const {height, width, x, y} = logo.getBoundingClientRect();

<OverlayMask
  defaultBounds={{
    height,
    width,
    x,
    y,
  }}
  visible
/>;

// or

const [bounds, setBounds] = useState({
  height: 0,
  width: 0,
  x: 0,
  y: 0,
});

useEffect(() => {}, []);

<OverlayMask bounds={bounds} onBoundsChange={setBounds} visible />;

API Reference

<T>({ defaultBounds, bounds, children, onClick, onBoundsChange, padding, visible, }: Props<T>) => JSX.Element

Parameters

Properties

bounds

Bounds | undefined

Sets the current value of bounds to define the highlight area (controlled).

children

React.ReactNode | ((ref: React.RefObject<T>) => React.ReactNode)

Sets the element that will receive the highlight.

onClick

((event: React.MouseEvent<SVGRectElement>) => void) | undefined

Callback is called when the overlay is clicked.

padding

number | undefined= 10

Set the highlight padding.

visible

boolean | undefined

Sets the current visibility of the overlay.

defaultBounds

Bounds | undefined= {"height":0,"width":0,"x":0,"y":0}

Sets the default value of bounds (uncontrolled).

onBoundsChange

InternalDispatch<Bounds> | undefined

Callback is called when the bounds changes (controlled).

Returns

Element

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 11, 2025 at 5:57:01 PM

Table of Contents

Example
Introduction
Area highlight
React component
Non-React component
API Reference