Creating a Character Count Progress Bar in React
Tags: javascript, webdev, programming, react
Published: 2022-05-22 20:42:14

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 are in notes and to-do list 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.


> Do check out my [blog](https://salehmubashar.com/blog) too!

---

# 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:

```javascript
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 the number of characters

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

```javascript
<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.

```javascript
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.

```javascript
<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:
```javascript
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.
```javascript
<LinearProgress
  className="charProgress"
  variant="determinate"
  value={input.length}
/>
```
# Wrapping Up

We are now done and this will be the complete code:
```javascript
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/342mzcd75togn7ts7v5b.gif)


---

Thanks for Reading!
Check out my [latest article on Hubpages](https://turbofuture.com/computers/React-and-Firestore-A-Complete-TutorialPart-2).