React CSS Highlight Studio

How to use React CSS Highlight Studio

1. Pick a sample text or paste your own, then type search terms separated by commas
2. Toggle case sensitive or whole word matching and set the max highlights cap
3. Choose one of the seven named highlight styles from the repo Highlight.css
4. Watch the matches light up through the CSS Custom Highlight API with no DOM changes
5. Copy the real Highlight component code and paste it into your project after npm install react-css-highlight

Features

• Real react-css-highlight 3.1.1 engine ported inline: TreeWalker matching and CSS.highlights registration
• Live match counter with case sensitive, whole word, debounce and max highlights controls
• All seven named highlight styles from the repo Highlight.css
• Browser support detection for the CSS Custom Highlight API with a graceful fallback
• Copy-ready Highlight, useHighlight and HighlightWrapper code with install command

Frequently asked questions