Resize Input Text to Avoid Overflow in a Functional React Form

I can think of several cases where being able to change the font size to fit the dimensions of an input field would come in handy. In fact, It’s very surprising to me that this is not something already baked into CSS. Oh well, with a little JavaScript and the use of some React hooks, this should not be too big of an issue.

In this article, we will create a simple form that takes one input, the user’s location, and changes the font size so we don’t have any overflow.

Let’s get started! First, we will need to create a functional React component that returns a form with a single input.

For this example, let’s just make sure the page doesn’t refresh when the form is submitted. In the handleSubmit function we will just prevent the default behavior of submission by adding e.preventrDefault().

Now that that’s out of the way, let’s work on making this a controlled form. In order to change the size of the text, we first need to know how many letters are in the input field any time the value of the input field is changed. To do this, we use a controlled form. We will begin by setting up a state variable. Since we are using a functional component, we will need to use hooks to accomplish this. Here we will use the useState hook.

Next, we will set up the input. We will need to set the value of our input equal to the state variable “location”, give the input an ID, and we’ll also need an onChange event listener that will execute our handleChange function anytime the input is changed. If you like, you can add a place holder and a function to clear the value when the input is selected, but the only things absolutely necessary for this controlled form are the value, the ID, and the onChange event listener.

Now let’s add some functionality to this form by building out our handleChange and handleClearField functions. We’ll start with handleChange.

As you can see, all that we are doing here is setting the state variable “location” to the value of the event target. The event being the change to the input, and the target being the input itself. Since the value of the input is set to our state variable “location”, this is what allows us to control the form. Now we have the input information from the user saved to a variable that we can use to determine the size of the input text.

To clear the field we do something similar. We just set the state variable “location” equal to an empty string. Once the value of the input is empty, the placeholder will be shown.

Now we just need to adjust the font size to fit the input field.

DISCLAIMER: This is going to take a little math, and your math may look different depending on the dimensions of your input field, the font you are using, etc, but this should give you a good starting point.

To adjust the font size, we will create a function that uses the number of characters in our location variable to determine the size of the font. Then we set that font size to the fontSize property of our input element. To determine the proper font size for our application, we need to make some design decisions first.

I decided that I wanted the font size to change not only depending on the number of characters, but also based on the width of the window. So, I have chosen to use the viewport width or “vw” unit of measurement. The base size that looks best for my application seems to be about 1.9vw. So, with 1.9 as my starting point, I want to reduce the size of my font with every new character added to the input field.

With all of that in mind, we need to create a variable to store the font size that looks something like this. ⬇️

Here we are taking our base font size (1.9) and subtracting location.length (the number of characters in our location variable) multiplied by 0.05… Again, the math for your specific application will likely be different. Then we select the input element by its ID and set the “fontSize” attribute equal to our variable fontSize+ ‘vw’.

To make everything work, we just have one more step. Let’s import the useEffect hook and use it to resize the input font when the component mounts, and every time our location variable changes.

With this useEffect hook, our adjustFontSize function gets run when the location component mounts. By including our location variable as a dependency, it will run adjustFontSize and trigger a re-render anytime the value of location changes.

That’s it! By using the information from our controlled form, we were able to create an input field with dynamic font size. No more dealing with an ugly overflow! Have fun and happy coding!

More content at plainenglish.io