How to highlight text based on user input with React.js ? - GeeksforGeeks

12 Mar, 2021
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:
Basic knowledge of npm & create-react-app command.
Basic knowledge of styled-components.
Knowledge of useState() React hooks.
Knowledge of onChange() event.
Basic Setup: You will start a new project using create-react-app so open your terminal and type:
npx create-react-app react-highlight-text
Now go to your react-highlight-text folder by typing the given command in the terminal:
cd react-highlight-text
Required module: Install the dependencies required in this project by typing the given command in the terminal:
npm install --save styled-components
Now go to the src folder and create a file AppStyles.js.
Project Structure: The file structure in the project will look like this:
Example: We create a state with the first element input as an initial state with a value of the empty string and the second element as function setInput() for updating the state. Then a function is created by the name toggleInput which sets the value of the state to the value we enter in our input field.
We set up our input field as a controlled component so that it updates the state accordingly. When we enter a value in our Input field, toggleInput function gets triggered through onChange event which sets the state to that entered value. We also use the state value just below our input field in InputHighlighter element styled with a top border (which covers our input field’s bottom border). This way, we use React state to update the value of both the Input field and InputHighlighter. So, when we enter a value in our input field, that value also gets updated in the InputHighlighter. That’s why the latter’s borderline keeps on increasing while we enter a text, but we don’t see it because we have set the CSS overflow property to none for our InputHighlighter. 
This makes the webpage users think that the input field is actually highlighting the text they are entering. But in reality, it doesn’t happen that way. They just see the top border of another element as an input highlighter.
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;
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.
Picked
React-Questions
Styled-components
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
How to create a multi-page website using React.js ?
ReactJS useNavigate() Hook
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript