DEV Community

Saleh Mubashar
Saleh Mubashar

Posted on • Updated on

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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}
/>
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Output

Result

Discussion (0)