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>neveropen - 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:
