When text comes alive on scroll

A new npm package for React, react-scroll-text-highlighter. This component is designed and developed looking to add a touch of interactivity and style to their web pages.

What does this component do?

The component is a simple wrapper that can be used to highlight any text on a webpage. What makes it special is that the highlight is not static, it animates fluidly as the user scrolls down the page. This creates a striking visual effect and guides the reader's attention as they progress through the content.

View on npm View on GitHub

This tool is perfect for bringing life to headlines, important quotes, or any text snippet you wish to highlight without resorting to intrusive animations. It is an example of how design and development can combine to create unique and memorable user experiences.

Key features

Easy to Use: Simply wrap the desired text with the component.
Fully Customizable: The color, thickness, and offset of the underline can be adjusted to perfectly match the site's style.
Lightweight and Efficient: The component is optimized to not impact page performance.
Scroll-Triggered Animation: The magic happens when users scroll, activating the animation and making the reading experience more engaging.

How to use it

Installation

npm install react-scroll-text-highlighter

Requirements

This package requires the following peer dependencies:

React >= 16.8.0
GSAP >= 3.13.0

Usage

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:

# 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

Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

⭐ Star this repository if you like it!