Animate UI

Highlight

A highlight effect that allows you to highlight elements on hover, click or with a controlled value.

Made by imskyleen
Edit on GitHub
Open in
Tab 1
Tab 2
Tab 3

Installation

Usage

Uncontrolled Items

By default, child items will have the highlight effect. This will map the children elements and surround them with the HighlightItem element.

<Highlight>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Highlight>

Controlled Items

Using the controlledItems props, you place your HighlightItem wherever you like in the Highlight component.

<Highlight controlledItems>
  <HighlightItem>Item 1</HighlightItem>
  <div>
    <HighlightItem>Item 2</HighlightItem>
  </div>
  <HighlightItem>Item 3</HighlightItem>
</Highlight>

Children Mode

By default, in mode with the value children the highlight is placed in the HighlightItem component using Motion's layoutId technique. This technique should be preferred in most cases. However, in some cases, you may run into z-index problems, so it's best to use the parent mode to avoid visual bugs.

<Highlight>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Highlight>

Parent Mode

By using the mode property with the value parent, the Highlight component will set the highlight to absolute in Highlight. This may be useful in some cases to avoid the visual z-index bugs you can get with mode children.

<Highlight mode="parent">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Highlight>

HighlightItem asChild

Children Mode

// With asChild
<Highlight>
  <HighlightItem asChild>
    <div id="item-1">Item 1</div>
  </HighlightItem>
  <HighlightItem asChild>
    <div id="item-2">Item 2</div>
  </HighlightItem>
</Highlight>
// Result
<div className="relative" id="item-1">
  <div /> {/* Highlight */}
  <div className="relative z-[1]">Item 1</div>
</div>
<div className="relative" id="item-2">
  <div /> {/* Highlight */}
  <div className="relative z-[1]">Item 2</div>
</div>

// Without asChild
<Highlight>
  <HighlightItem>
    <div id="item-1">Item 1</div>
  </HighlightItem>
  <HighlightItem>
    <div id="item-2">Item 2</div>
  </HighlightItem>
</Highlight>
// Result
<div className="relative" >
  <div /> {/* Highlight */}
  <div className="relative z-[1]" id="item-1">Item 1</div>
</div>
<div className="relative" >
  <div /> {/* Highlight */}
  <div className="relative z-[1]" id="item-2">Item 2</div>
</div>

Parent Mode

// With asChild
<Highlight mode="parent">
  <HighlightItem asChild>
    <div id="item-1">Item 1</div>
  </HighlightItem>
  <HighlightItem asChild>
    <div id="item-2">Item 2</div>
  </HighlightItem>
</Highlight>
// Result
<div className="relative">
  <div /> {/* Highlight */}
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
</div>

// Without asChild
<Highlight mode="parent">
  <HighlightItem>
    <div id="item-1">Item 1</div>
  </HighlightItem>
  <HighlightItem>
    <div id="item-2">Item 2</div>
  </HighlightItem>
</Highlight>
// Result
<div className="relative">
  <div /> {/* Highlight */}
  <div>
    <div id="item-1">Item 1</div>
  </div>
  <div>
    <div id="item-2">Item 2</div>
  </div>
</div>

API Reference

Highlight

PropTypeDefault
as?
React.ElementType
div
mode?
'children' | 'parent'
children
value?
string | null
-
defaultValue?
string | null
-
onValueChange?
(value: string | null) => void
-
className?
string
-
style?
React.CSSProperties
-
transition?
Transition
{ type: 'spring', stiffness: 350, damping: 35 }
hover?
boolean
false
click?
boolean
true
disabled?
boolean
false
enabled?
boolean
true
exitDelay?
number
0.2
controlledItems?
boolean
-
itemsClassName?
string
-

Mode: "parent"

PropTypeDefault
boundsOffset?
Partial<Bounds>
-
containerClassName?
string
-
forceUpdateBounds?
boolean
-

HighlightItem

PropTypeDefault
as?
React.ElementType
div
children
React.ReactElement
-
id?
string
-
value?
string
-
className?
string
-
style?
React.CSSProperties
-
transition?
Transition
-
activeClassName?
string
-
disabled?
boolean
false
exitDelay?
number
-
asChild?
boolean
false
forceUpdateBounds?
boolean
-

Built by Skyleen. The source code is available on GitHub.