An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
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
Original Link: https://dev.to/salehmubashar/creating-a-character-count-progress-bar-in-react-3gni
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To