A tiny utility for highlighting or replacing specific text matches inside strings with custom React components.
Perfect for inline highlighting, smart mentions, tokenized UI, or simple templating in JSX.
npm install react-wrap-text
Use wrapMatchesInText if you want to highlight specific parts of the text.
import { wrapMatchesInText } from 'react-wrap-matches'; // Define an optional wrapper component const Highlight = ({ children }: { children: React.ReactNode }) => ( <mark>{children}</mark> ); const text = "Hit or miss, I guess they never miss, huh?"; const result = wrapMatchesInText(text, "miss", (match, i) => ( <Highlight key={i}>{match}</Highlight> )); // Output: // Hit or <mark>miss</mark>, I guess they never <mark>miss</mark>, huh? return <p>{result}</p>;
Use wrapMatchesInText if you want to replace matching parts of the text with a JSX component.
import { wrapMatchesInText } from 'react-wrap-matches'; const text = "You've scored 100 points!"; const result = wrapMatchesInText(text, "100", (_, i) => ( // This also works with inline jsx <strong key={i}>π―</strong> )); // Output // You've scored <strong>π―</strong> points! return <p>{result}</p>;
Use wrapMultipleMatchesInText if you need to highlight/replace multiple substrings.
import { wrapMultipleMatchesInText } from 'react-wrap-matches'; const Highlight = ({ children }: { children: React.ReactNode }) => ( <mark>{children}</mark> ); const HighlightOrange = ({ children }: { children: React.ReactNode }) => ( <mark style={{ backgroundColor: "oklch(75% 0.183 55.934)" }}>{children}</mark> ); const text = "This is a test. This test works."; const multiPayload: Parameters<typeof wrapMultipleMatchesInText>[1] = [ { target: "This", render: (match, i) => <Highlight key={i}>{match}</Highlight>, }, { target: "works", render: (match, i) => <HighlightOrange key={i}>{match}</HighlightOrange>, } ]; const result = wrapMultipleMatchesInText(text, multiPayload); // Output // <mark>This</mark> is a test. <mark>This</mark> test <mark style="background-color: oklch(0.75 0.183 55.934);">works</mark>. return <p>{result}</p>;