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)