Build a React.js Word & Text Annotation Highlighter Component Using react-highlight-words in TS

geekygautam1997 January 11, 2025No Comments

npm i react-highlight-words

App.jsx

import React from "react";
import Highlighter from "react-highlight-words";

const App = () => {
  return (
    <Highlighter
      highlightClassName="YourHighlightClass"
      highlightStyle={{color:"blue"}}
      searchWords={["and", "or", "the"]}
      autoEscape={true}
      textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
    />
  );
};

export default App

import React from "react";

import Highlighter from "react-highlight-words";

const App = () => {

return (

<Highlighter

highlightClassName="YourHighlightClass"

highlightStyle={{color:"blue"}}

searchWords={["and", "or", "the"]}

autoEscape={true}

textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"

);

};

export default App

geekygautam1997

View All Posts

Comments

No comments yet. Why don’t you start the discussion?

Build a React.js Word & Text Annotation Highlighter Component Using react-highlight-words in TS

Comments

Leave a Reply Cancel reply

Archives