Here's an example of how you can implement a character counter in real time with a maximum limit of 1000 characters:
import React, { useState } from 'react';
const CharCounter = () => {
const [inputValue, setInputValue] = useState('');
const maxCharacters = 1000;
const handleInputChange = (e) => {
const inputText = e.target.value;
if (inputText.length <= maxCharacters) {
setInputValue(inputText);
}
};
return (
<div className="right_buddySearch">
<div className="buddySearch_container">
<input
type="text"
className="buddySearch_input"
placeholder="Ask us anything..."
value={inputValue}
onChange={handleInputChange}
/>
<div className='char-counter'>{inputValue.length}/{maxCharacters}</div>
<button className="buddySearch_send">
{/* <img src="send-icon.png" alt="Send" /> */}