Sign in

Adam Workman

Last week I wrote a very similar article on how to resize the text to fit an input box with static dimensions. This week, we will look into resizing the input box to fit the text. It’s too bad that neither has a pure CSS solution, but it can easily be accomplished with some JavaScript.

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

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.

A pretty common theme in my articles is the proper way to use state and/or state hooks. Mutating state directly is a big no-no. If we mutate state without creating a new object, we can lose functionality and cause some strange behavior.

Looking to class things up with an analog clock? Well, you have come to the right place. In this article, we will look at one way to build a simple analog clock in React using functional components. As a bonus, we will also create a digital clock for those with varying degrees of dyscalculia.

Let’s start by building a functional component in a new file called Clock.js.

Who doesn’t love a nice live/instant search feature? They save the user the hassle of typing out the full query and they can be especially useful when trying to find something in a list that has already been populated.

In this article, we will set up a live search for our friends list so that the user can find a specific friend more easily.

Oftentimes, we want to alter what we show to the user based on a condition. Let’s say we want to change the content of a card when the user clicks a button. There are several ways to accomplish this, but in this example, we will be taking a look at the logical AND operator.

In an anchor tag, we use the rel attribute to define the relationship between the current document and a linked resource. When opening the linked resource in a new tab or window (target=”_blank”), we use the rel attribute with the values noopener and/or noreferrer. So, why is this important and why would we choose one over the other… or both?

There are lots of reasons you may want a component to re-render, but not nearly as many ways to accomplish this. React is pretty strict when it comes to triggering a re-render. I have touched on the reasons why mutating state directly is a big “no-no” in the React world, and this is a big part of it.

So, you want to save an altered image for later use. Let’s say you want to allow the user to upload a photo, crop it, and save that cropped image as their avatar. Here I am going to go over one solution that I have found for getting the altered image information from React to Rails and attaching that information to the user via ActiveStorage. I will not be covering how to upload a photo, crop it, or how to set up ActiveStorage. For that information, I recommend that you check out the links below.

~upload/ActiveStorage/cloudinary ~crop~

If you are using class components in React, it is likely that you want access to state. There are ways to use state in functional components using hooks, but here we are going to take a closer look at the setState function in class components.

Adam Workman

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store