Skip to content
Related Articles

Related Articles

How to add Text Highlighter in Next.js ?

Improve Article
Save Article
Like Article
  • Last Updated : 15 Nov, 2021

In this article, we are going to learn how we can add Text Highlighter in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.

Approach: To add our Text Highlighter we are going to use the react-highlight-words package. The react-highlight-words package helps us to add text highlighter anywhere in our app. So first, we will install the react-highlight-words package and then we will add a text highlighter on our homepage.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

Install the required package: Now we will install the react-drag-drop-files package using the below command:

npm i react-highlight-words

Project Structure: It will look like this.

Adding the File Dropper: After installing the react-highlight-words package we can easily add Text Highlighter in our app. For this example, we are going to add a text highlighter to our homepage.

Add the below content in the index.js file:

Javascript




import Highlighter from "react-highlight-words";
import React from 'react'
  
export default function TextHighlighter() {
  return (
    <div>
      <h3>GeeksforGeeks - Highlighter</h3>
      <Highlighter
        highlightClassName="YourHighlightClass"
        searchWords={["Gfg", "text"]}
        autoEscape={true}
        textToHighlight="This is text for GfG example"
      />
    </div>
  )
}

Explanation: In the above example first, we are importing our Highlighter component from the installed package. After that, we are using the Highlighter component inside a new function. We can enter the words that we want to highlight in searchWords prop and our text in the textToHighlight prop.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!