handwritten-highlights/README.md

Beautiful & animated text highliter for your Next/React project. Enhance your text with colorful visuals and animations that resembles real writing.

[![npm version](https://badge.fury.io/js/handwritten-highlights.svg)](https://badge.fury.io/js/handwritten-highlights)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

# 📑 Handwritten Highlights ✍️ ✨

> Beautiful & animated text highlighter for your React/Next.js project. Enhance your typography with colorful, animated highlights that resemble a real handwritten work.

---

![handwritten-highlights_preview](https://github.com/user-attachments/assets/9e57185d-ab37-44ed-98de-3f2d899c739c)

## Requirements

This library works with **React 17+** and NextJS.  
Tested and working on Next 15.4

## Installation

```
npm install handwritten-highlights
```

## First, wrap your app with the provider


```jsx
  import { HighlightProvider } from "handwritten-highlights";
  ...

  <HighlightProvider>
    <App />
  </HighlightProvider>
```

## Then apply the Highlights
```jsx
import { HighlightMarker, HighlightUnderline } from "handwritten-highlights";
...
function YourComponent() {
  
  return (
    <>
      ...
      <p>
        <HighlightMarker>Lorem ipsum</HighlightMarker>, dolor
        sit amet consectetur adipisicing elit. Commodi eos temporibus,
        adipisci facilis qui cumque, reiciendis saepe mollitia ratione
        optio officia illum earum fugiat fugit distinctio! Repellat,
        porro adipisci magni accusantium nemo fugiat minus libero eos
        quis, numquam excepturi molestias error consequatur tempore?
        Corrupti at eum nemo, rem nulla facilis!
      </p>
    </>
  )
}
```

## What styles are available?

Currently there are 2 available styles:
  - Marker style
  - Underline style  

You can use them respectively as follows:
```jsx
import { HighlightMarker } from "handwritten-highlights"

<HighlightMarker>...some text...</HighlightMarker>
```
```jsx
import { HighlightUnderline } from "handwritten-highlights"

<HighlightUnderline>...some text...</HighlightUnderline>
```

## Configure the highlight the way you prefer
By default no animation is displayed but they are easy to enable and configure
```jsx
<HighlightMarker
  animationEffect="ease-out"
  animationOffset={500}
  animationDuration={600}
  highlightColor="hsla(288, 60%, 50%, 0.30)"
>
  ...
</HighlightMarker>
```
#### animationEffect
```jsx
"ease" | "ease-in" | "ease-out" | "ease-in-out"
```
"None" is set by default.
If you specify an animation, to make it effective, other parameters are required which are:

```jsx
animationOffset:{number}  // 0 by default. Expressed in milliseconds

animationDuration:{number}  // 0 by default. Expressed in milliseconds
```

You can also change the color for each effect
```jsx
highlightColor:{CSS Color string} // Only rgb() , rgba() , hsla(), hex are supported
```

## There are some effect variants available
```jsx
highlightVariant: {string} // 1, 2, random
```
Currently there are only 2 for both Marker and Underline.  
If set to "random", every time the page is reloaded, the effect variant to use changes. 

### ... More effect variants coming soon!
  

### License
See the LICENSE file.