React Hooks: creating a char counter component

Hello fellow readers!

In this article I am going to show you how to build a simple char counter component that can be used anywhere, for example on a simple text input or even a text area!

The final result is the following:

The char counter component

Let's start with this simple component. This is going to be a stateless component that just receives the current count and the total count.

type CharCountProps = {
  current: number;
  total: number;
};

const CharCount = ({ current, total }: CharCountProps) => {
  return (
    <span style={{ color: current > total ? 'red' : 'black' }}>
      {`${current}/${total}`}
    </span>
  );
};

As you can see, I also applied a color style to change the text to red if the current count is greater than the total.
Now let's apply this component to a text input!

Applying to a text input

We are now creating the text input that will hold the CharCount component.
To make it flexible, this custom input has a maxLength prop that tells us how many characters are allowed.
Also, our CharCount component is only going to render if this prop is different from undefined.

Note below that the input onChange handler updates the value state, which length property is used on CharCount.

type CustomInputProps = {
  maxLength?: number;
};

const CustomInput = ({ maxLength }: CustomInputProps) => {
  // This state holds the input's text
  const [value, setValue] = useState<string>('');

  return (
    <fieldset>
     {/* Here is our input that is being watched */}
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.currentTarget.value)}
      />

      {/* The char counter only renders if the maxLength prop is provided */}
      {maxLength !== undefined && (
        /* The CharCount component receives the current string length and the max length supported for this field */
        <CharCount current={value.length} total={maxLength} />
      )}
    </fieldset>
  );
};

Wrapping up

Lets now just create a CustomInput with a defined maxLength:

export default function App() {
  return <CustomInput maxLength={10} />;
}

This renders an input with a char counter validation! You may now add some behavior, like alerting the user that the input content cannot be greater than the expected.

Here we used a simple useState hook to hold our input's data and pass it further to the CharCount stateless component.

You may find the complete code clicking here.

That's it for now! I hope you all enjoyed it!
Feel free to use the comment section below to share your ideas!