Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 22, 2022 08:42 pm GMT

Creating a Character Count Progress Bar in React

Hello guys
In this short tutorial, we will be looking into how to create a Character Count Progress Bar in React JS.
Common uses of this is in notes and todolist applications where you want to restrict user input to a fixed amount of characters. We can visualize this to improve user experience using a linear progress bar.

Create a simple text area

Firstly lets create a simple text area in a new react app. Your App.js should contain the following code:

import { React, useState } from "react";import "./styles.css";export default function App() {  return (    <div className="App">      <textarea cols="20" rows="5"></textarea>      <div className="progress">        <span className="charLeft"> characters left</span>      </div>    </div>  );}

Here we have created a simple react app with a text area and a div containing a span that will show the number of characters left.

Restricting number of characters

The maximum number of characters that a user can type can be easily set using the maxLength of textarea as follows:

<textarea maxLength="100" cols="20" rows="5"></textarea>

Storing input text

Next we need to store the input that the user gives in a state so that we can use that for the progress bar and span. We will create a simple state and an onchange function that will update it every time the user types something.

import { React, useState } from "react";import "./styles.css";export default function App() {  const [input, setInput] = useState("");  const inputHandler = (e) => {    setInput(e.target.value);  };  return (    <div className="App">      <textarea        maxLength="100"        cols="20"        rows="5"        onChange={inputHandler}      ></textarea>      <div className="progress">        <span className="charLeft">           characters left        </span>      </div>    </div>  );}

Displaying characters left

Now we need to display the number of characters left which will be 100 - the length of the input.

<span className="charLeft">    {100 - input.length} characters left</span>

Creating the progress bar

For the linear progress bar, we can use the material ui progress bars. For this, firstly install mui:
npm install @mui/material
Next we need to import the linear progress component:

import LinearProgress from "@mui/material/LinearProgress";

The value or "progress" of the bar is defined by the value prop and the type of the bar is determinate which is assigned by the variant prop.

<LinearProgress  className="charProgress"  variant="determinate"  value={input.length}/>

Wrapping Up

We are now done and this will be the complete code:

import { React, useState } from "react";import "./styles.css";import LinearProgress from "@mui/material/LinearProgress";export default function App() {  const [input, setInput] = useState("");  const inputHandler = (e) => {    setInput(e.target.value);  };  return (    <div className="App">      <textarea        maxLength="100"        cols="20"        rows="5"        onChange={inputHandler}      ></textarea>      <div className="progress">        <span className="charLeft">{100 - input.length} characters left</span>        <LinearProgress          className="charProgress"          variant="determinate"          value={input.length}        />      </div>    </div>  );}

Output

Result


Original Link: https://dev.to/salehmubashar/creating-a-character-count-progress-bar-in-react-3gni

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To