CreateIT
CreateIT
BLOG

Character counter in React

Ninja sitting in front of a computer screen

Character counter in React

SHARE

Challenge:
set character limit for text area and display current count
Solution:
handle the onChange event, use a Bootstrap badge to display the results

Sometimes we want to restrict the number of characters that can be written in text input or text area. One solution is to use the HTML5 attribute for form elements, like maxlength. For example:

<Form.Control as="textarea" maxLength={characterLimit} />

However, it will be even better to display the current character count and when the limit is exceeded to change the color of a form element to red. We will be using the isInvalid parameter of Form.Control and changing the badge background to danger to emphasize that the limit has been achieved.

Text box with sample text

React Bootstrap

To have general styles and invalid states already styled, we’re going to install the NPM library with Bootstrap components. Use the following command to install dependency:

npm install react-bootstrap [email protected]

And then, import styles in src/index.jsx :

// src/index.jsx
import 'bootstrap/dist/css/bootstrap.min.css';

We use basic Grid elements, Form for displaying textarea and badge for the character counter display.

Demo in React

Here is the source code for the main application. When the user is typing in the textarea, we’re updating the inputText value. Having this, we can easily calculate the length (number of characters typed). CharacterLimit is set to 30. An error will appear after exceeding the value.

// src/App.jsx
import React, { useState } from "react";
import './App.css';
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Form from 'react-bootstrap/Form'
import Badge from 'react-bootstrap/Badge'
function App() {
  const [inputText, setInputText] = useState("");
  const [characterLimit] = useState(30);
  // event handler
  const handleChange = event => {
    setInputText(event.target.value);
  };
  return (
    <div className="App">
      <Container>
        <Row className="justify-content-md-center">
          <Col xs lg="3">
            <Form>
              <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
                <Form.Label>Example textarea</Form.Label>
                <Form.Control as="textarea"  rows={3} value={inputText} onChange={handleChange} isInvalid={(inputText.length > characterLimit)} />
                <Badge className='mt-3' bg={`${inputText.length > characterLimit ? 'danger' : 'primary'}`}>{inputText.length}/{characterLimit}</Badge>
              </Form.Group>
            </Form>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

Empty text box

export default App;

That’s it for today’s tutorial, make sure to follow us for other useful tips and guidelines, and don’t forget to subscribe to our newsletter.

Need help?

  • Looking for support from experienced programmers?

  • Need to fix a bug in the code?

  • Want to customize your webste/application?

ADD COMMENT

Your email address will not be published.

createIT Contact