Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

OverlayMask

yarn add @clayui/core

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

  • Examples
  • API

Beta3.85.0CHANGELOGstorybook demos

  • Example
  • Introduction
  • Area highlight
    • React component
    • Non-React component

Example

Copied!
Code Sample (expand to see it)

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.

<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.

<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.

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
/>

How can this be improved? Create an issue!