# Text Highlighter

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

## Installation

### CLI

```bash
npm install magic-ui highlighter
```

### Manual

```javascript
import { Highlighter } from 'magic-ui';
```

## Usage

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

## Props

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" | "bracket" | "crossed-off" | "strike-through" | "underline"` | `"highlight"` | The type of annotation effect to apply.                                                          |
| `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.                     |

## Credits

- Credit to [@pratiyank](https://github.com/Pratiyankkumar) for this component!