Hello Guys,

We’ll look at how to make a Character Count Progress Bar in React JS in this quick tutorial.

This is commonly used in notes and to-do list apps if you wish to limit user input to a certain number of characters. Using a linear progress bar, we can visualize this to improve the user experience.

Create a simple text area:

Let’s start by making a simple text area in a new react app.

The following code should be in your App.js file:

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>
  );
}

We’ve made a small react app with a text box and a div holding a span that shows how many characters are remaining.

Restricting number of characters:

The maximum amount of characters a user can type can be simply set by utilizing the textarea’s maxLength property:

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

Storing input text:

After that, we need to save the user’s input in a state so that we can use it for the progress bar and span.

We’ll make a simple state and use the onchange method to update it whenever 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 must display the remaining characters, which will be 100 due to the input’s length.

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

Creating the progress bar:

The material ui progress bars can be used for the linear progress bar.

To do so, first download and install mui:

npm install @mui/material

The linear progress component must then be imported:

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

The value or “progress” of the bar is determined by the value prop, while the bar’s type is determined by the variation prop.

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

Wrapping Up:

We’ve finished, and here’s the whole 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>
  );
}