How to highlight text based on user input with React.js ?
Last Updated :
10 Nov, 2023
One common feature in many applications is the ability to highlight specific portions of text based on user input. In this article, we will explore how to implement text highlighting functionality using React.js.
The following approach covers how to highlight text input given by users in ReactJS. It is a simple effect you can add to any ReactJS website.
Prerequisite:
Steps to Create React Application:
Step 1: Initialize new react project using this command in the terminal
npx create-react-app react-highlight-text
Step 2: Move to the project directory.
cd react-highlight-text
Step 3: Install the dependencies required in this project by typing the given command in the terminal:
npm i --save styled-components
Project Structure:

The updated dependencies in package.json file will look like.
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"styled-components": "^6.1.1",
"web-vitals": "^2.1.4
}
Example: This example implements highlighted text based on user input using the onchange event.
JavaScript
// Filename - App.js
import React, { useState } from "react";
import {
InputContainer,
Input,
InputHighlighter,
Heading,
} from "./AppStyles";
const App = () => {
const [input, setInput] = useState("");
const toggleInput = (e) => {
setInput(e.target.value);
};
return (
<InputContainer>
<Heading>GeeksforGeeks</Heading>
<Input
onChange={toggleInput}
placeholder="Type your name"
value={input}
/>
<InputHighlighter>{input}</InputHighlighter>
</InputContainer>
);
};
export default App;
JavaScript
// Filename - AppStyles.js
import styled from "styled-components";
export const InputContainer = styled.div`
width: 600px;
margin: 40px auto;
position: relative;
`;
export const Heading = styled.h1`
text-align: center;
color: green;
`;
export const Input = styled.input`
height: 70px;
width: 100%;
padding: 0;
font-size: 35px;
border: none;
outline: none;
border-bottom: 4px solid rgba(192, 192, 192);
`;
export const InputHighlighter = styled.span`
font-size: 35px;
border-top: 4px solid green;
position: absolute;
left: 0;
bottom: 0;
height: 0;
overflow: hidden;
`;
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output. See how borderline increases when we enter a text and starts decreasing when we remove the characters one by one.

Similar Reads
How to add Text Highlighter in Next.js ? 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 con
2 min read
How to show user image along with input field in ReactJS? We can show the user image along with the input field in React JS. It is like adding an icon image inside the input field. This feature can also be seen on many website login screens. Material UI for React has this component available for us and it is very easy to integrate. We can use the InputAdor
3 min read
How to create basic text input in React Native ? Text input is a basic component that allows users to input text through the keyboard. It is widely used in mobile applications for taking usernames, passwords, user details, and much more.In React Native, we have a TextInput component to achieve this. It comes with many props that help us to modify
4 min read
How to create a translucent text input in ReactJS ? We are going to learn how to create a translucent text input in React JS. We are going to create a translucent animated text input using framer-motion and styled components.Prerequisites:JavaScript (ES6)React JSReact useStatestyled-componentsframer-motion Approach: We are going to create a transluce
4 min read
How to create OTP Input Box Using React ? Let us explore the implementation of OTP (One-Time Password) login functionality using ReactJS. OTP-based logins add an extra layer of security to your applications, making them more resilient against unauthorized access.Prerequisites:ReactHTML, CSS and JavaScriptApproach:Create a React functional c
3 min read
How To Add Strike Through On Text In React Native ? In this article, we will explore two different approaches to adding a strike-through effect to text in React Native. It is also known as crossed-out text used to display the text as cross-marked.PrerequisitesIntroduction to React NativeReact Native ComponentsReact HooksExpo CLINode.js and npm Syntax
4 min read