DEV Community

jQueryScript
jQueryScript

Posted on

React CSS Highlight: Zero-Dependency Text Highlighting with Modern Browser APIs

React CSS Highlight: a JavaScript library that highlights text without touching your DOM structure.

It uses the CSS Custom Highlight API and TreeWalker for fast searches.

Key features:

  • Zero DOM mutations or wrapper elements
  • Works with React components, portals, and vanilla JavaScript
  • Full TypeScript support with type definitions
  • Multiple highlight colors through CSS custom properties
  • Debouncing and performance limits built in

You can implement it through ref-based components, wrapper components, or hooks, depending on your architecture.

Check it out if you need search functionality or text annotation without the overhead of DOM manipulation.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)