react-multi-highlite

react-multi-highlite is a React component that allows you to highlight specific words or phrases within a block of text. This can be particularly useful for emphasizing important information, highlighting search terms, or making certain parts of the text stand out.

It is used by adfree-recipe.com in the recipe section.

Installation

npm install react-multi-highlite

Props

children: The text to search for matches (required).
matchers: Array of matcher objects containing `text` and `classname` (required).
className: The className of the entire line div (optional).
caseSensitive (optional): Whether the matching should be case-sensitive. Defaults to false.
wrapperElement (optional): Custom wrapper element for the highlighted text. This should be a function that returns a React element.

Basic Usage

In software development, highliteing important pieces of information can greatly improve readability and comprehension. For instance, highliteing code snippets, errors, or important notes in documentation can make a significant difference.

const text = "In software development, highliteing important pieces of information can greatly improve readability and comprehension. For instance, highliteing code snippets, errors, or important notes in documentation can make a significant difference.";
const matchers = [
  { text: "highliteing", classname: "bg-red-200 text-black" },
  { text: "important", classname: "bg-green-300 text-black" },
  { text: "information", classname: "bg-gray-600 text-white" },
  { text: "documentation", classname: "bg-purple-300 text-black" },
];
<MultiHighLite matchers={matchers}>{text}</MultiHighLite>

Dynamic highliteing

const initialText = "In software development, highliteing important pieces of information can greatly improve readability and comprehension. For instance, highliteing code snippets, errors, or important notes in documentation can make a significant difference.";
const [text, setText] = useState(initialText);
const [highlite, sethighlite] = useState("");

const dynamicMatchers = [
  { text: highlite, classname: "bg-yellow-300 text-black" },
];

<textarea value={text} onChange={e => setText(e.target.value)} />
<input value={highlite} onChange={e => sethighlite(e.target.value)} placeholder="Enter text to highlite" />
<MultiHighLite matchers={dynamicMatchers}>{text}</MultiHighLite>

Case-Sensitive highliteing

In software development, highliteing Important pieces of information can greatly improve readability and comprehension. For instance, highliteing code snippets, errors, or important notes in Documentation can make a significant difference.

const text = "In software development, highliteing Important pieces of information can greatly improve readability and comprehension. For instance, highliteing code snippets, errors, or important notes in Documentation can make a significant difference.";
const matchers = [
  { text: "highliteing", classname: "bg-red-200 text-black" },
  { text: "Important", classname: "bg-blue-200 text-black" },
  { text: "information", classname: "bg-green-300 text-black" },
  { text: "Documentation", classname: "bg-purple-300 text-black" },
];
<MultiHighLite matchers={matchers} caseSensitive>{text}</MultiHighLite>

Custom Wrapper Element

In software development, highliteing important pieces of information can greatly improve readability and comprehension. For instance, highliteing code snippets, errors, or important notes in documentation can make a significant difference.

const text = "In software development, highliteing important pieces of information can greatly improve readability and comprehension. For instance, highliteing code snippets, errors, or important notes in documentation can make a significant difference.";
const matchers = [
  { text: "highliteing", classname: "bg-red-200 text-black" },
  { text: "important", classname: "bg-green-300 text-black" },
  { text: "information", classname: "bg-gray-600 text-white" },
  { text: "documentation", classname: "bg-purple-300 text-black" },
];

const customWrapper = (className: string, text: string, key: number) => (
  <strong key={key} className={className}>{text}</strong>
);

<MultiHighLite matchers={matchers} wrapperElement={customWrapper}>{text}</MultiHighLite>