Text Highlighter

A text highlighter that mimics the effect of a human-drawn marker stroke.

Installation

npm install magic-ui highlighter

import { Highlighter } from 'magic-ui';

<Highlighter color="#ffd1dc" strokeWidth={1.5} iterations={2}>
  This is an important piece of text.
</Highlighter>

Here's the updated props table with units specified for the numerical values:

Prop	Type	Default	Description
`children`	`React.ReactNode`	Required	The content to be highlighted/annotated.
`color`	`string`	`"#ffd1dc"`	The color of the highlight.
`action`	`"highlight"	"circle"	"box"
`strokeWidth`	`number`	`1.5px`	The width of the annotation stroke.
`animationDuration`	`number`	`500ms`	Duration of the animation in milliseconds.
`iterations`	`number`	`2`	Number of times to draw the annotation (adds a sketchy effect when > 1).
`padding`	`number`	`2px`	Padding between the element and the annotation.
`multiline`	`boolean`	`true`	Whether to annotate across multiple lines or treat content as a single line.
`isView`	`boolean`	`false`	Controls whether the animation starts only when the element enters viewport.