Highlighter
Demo
Components
Flexible Components
Templates
Composable Templates
Themes
Customizable Themes
Alocite UI
Build fast, accessible, and beautiful interfaces.
HighlightGroup Props
| Name | Type | Description |
|---|---|---|
children | React.ReactNode | The child elements to be rendered inside the HighlightGroup. |
className | string | Optional CSS class for custom styling. |
refresh | boolean | If true, the component recalculates its size and reinitializes on demand. |
HighlighterItem Props
| Name | Type | Description |
|---|---|---|
children | React.ReactNode | The content to be displayed inside the HighlighterItem. |
light | boolean | If true, applies a light-themed highlight effect. |
border | boolean | If true, adds a border highlight effect. |
wrapper | boolean | If true, wraps the children in an additional div with optional styling. |
wrapperClassName | string | Optional CSS class for the wrapper div. |
className | string | Optional CSS class for custom styling. |
Implementation Details
HighlightGroup: Manages a collection of items and tracks mouse movement to create interactive highlight effects.HighlighterItem: Individual item that reacts to mouse movement within the HighlightGroup. It offers options for different styles of highlights, such as light-themed or border effects.
The components use the useMousePosition hook to track the mouse's position relative to the items and apply dynamic styles based on the mouse's location.
Styles
Both components use utility classes for styling, which can be customized via the classNames prop. Specific style classes include:
- For
HighlightGroup:classNameapplies to the main container. - For
HighlighterItem:classNameandwrapperClassNameapply to the item and its optional wrapper, respectively. The component also uses pseudo-elements for interactive highlight effects.