# React Scroll Text Highlighter

A React component that creates a smooth text highlighting animation triggered by scroll position using GSAP.

![Demo example](https://raw.githubusercontent.com/pablo-zafra/npm-react-scroll-text-highlighter/main/demo.gif)

## Installation

```bash
npm install react-scroll-text-highlighter
```

## Requirements

This package requires the following peer dependencies:

- React >= 16.8.0
- GSAP >= 3.13.0

## Usage

```jsx
import TextHighlight from "react-scroll-text-highlighter";

function App() {
  return (
    <h1>
      Check this:
      <TextHighlight textColor="#000000" highlightColor="#ffeb3b">
        This text will be highlighted on scroll
      </TextHighlight>
      This text will not.
    </h1>
  );
}
```

## Props

| Prop             | Type     | Default      | Description                       |
| ---------------- | -------- | ------------ | --------------------------------- |
| `textColor`      | `string` | `#FFFFFF`    | Color of the text                 |
| `highlightColor` | `string` | `#6D00C7`    | Color of the highlight effect     |
| `start`          | `string` | `bottom 98%` | GSAP ScrollTrigger start position |
| `end`            | `string` | `bottom 65%` | GSAP ScrollTrigger end position   |

## Example Project

Check out the `example-project` directory for a complete working example using Next.js.

To run the example:

```bash
# Clone the repository
git clone https://github.com/pablo-zafra/npm-react-scroll-text-highlighter.git

# Install dependencies
npm install

# Link the package locally
npm link

# Move to example project
cd example-project

# Install dependencies
npm install

# Link to local package
npm link react-scroll-text-highlighter

# Run the development server
npm run dev
```

## License

MIT © Pablo Zafra

## Contributing

Contributions, issues and feature requests are welcome. Feel free to check [issues page](https://github.com/pablo-zafra/npm-react-scroll-text-highlighter/issues) if you want to contribute.

---

Made with ❤️ by [Pablo Zafra](https://pablozafra.dev/).
[⭐ Star this repository](https://github.com/pablo-zafra/npm-react-scroll-text-highlighter) if you like it!
