Twitter Vimeo download Facebook Pinterest flash Brackets { }

Stranger Forms: Textarea Auto Resize with React

I freaking love this show

tldr: here’s the code if that’s what you’re here for.

Forgive the shameless Stranger Things fandom, but there’s a good metaphor in there. The “upside down” is a world that mirrors our own, but it’s hidden from our view, and it’s way damn spookier.

Well, to get tricky form elements to do what we want, we’re gonna need to go there.

Recently I wanted to make a <textarea> element automatically expand vertically as text is entered. A basic <div> element would do this, but form elements are a different animal. For example, watch what happens as a word breaks onto the next line:

The <textarea> doesn’t expand to fit the content inside. This can get pretty annoying if you’re trying to keep track of your writing. There is no pure CSS solution. If you’re a masochist you can stop what you’re doing and resize it manually…

But it’s 2016 and that seems insane. Just fixing the element to a static height is not an option either. The intended behavior that I have in mind is more like this:

So how do we get there? Well, we’re going to build a ghost <div> that mirrors the contents of the <textarea>. Then when the hidden <div> resizes, we apply that height to the <textarea>. And to make sure the hidden element is not problematic for assistive technology, we add aria-hidden="true".

It’s not the most original idea, but I figured that an implementation in React is probably useful for some people. The barebones component is in a Gist below.

Or get a full example in JSFiddle.

Update 8/29: Coincidentally it turns out that Edenspiekermann alumnus Max Hoffman has an excellent vanilla JS solution to this as well. It’s worth mentioning here, in case you need something non React-specific.

Eric Schaefer’s avatar

Eric Schaefer is a full-stack JavaScript developer at Edenspiekermann. These days he works mainly with React and Node.js. If you can’t find him, he’s probably drumming or making music.