how to dinamically resize a textarea in react

Question

I'm trying to change the size of a textarea with the text. The code is working but for any reason that I don't get, the textarea resizes with the first letter I stroke and then works propertly. Any idea what is causing this weird first resizing?

This is the code I have in the app.js in a recently created project.

import './App.css';

function App() {

  function handleKeyDown(e) {

    e.target.style.height = 'inherit';
    e.target.style.height = `${e.target.scrollHeight}px`;

  }

  return (

    <div>
      <header className="App-header" style={{
         display: 'flex',
         justifyContent: 'center',
         width: '470px',
         backgroundColor: '#fff',
         borderRadius: '5px',
         padding: '25px 25px 30px'
          }} >
        <div>
          <textarea onChange={handleKeyDown} style={{
            width: '95%',
            padding: '15px',
            borderRadius: '5px',
            outline: 'none',
            resize: 'none'
          }} />
        </div>
      </header>
    </div>)
;}

export default App;

Any idea what is causing this weird first resizing? Maybe there is something I'm missing, any clue can help.

Thanks.

Does this answer your question? [Creating a textarea with auto-resize](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — kennarddh, Aug 25 '22 at 11:56

score 1 · Accepted Answer · edited Apr 08 '23 at 09:59

You need to add a hook that runs code once the DOM is first loaded and then also make the height change there.

However I'd recommend just using a library for this: https://github.com/Andarist/react-textarea-autosize.

import React, { useLayoutEffect, useRef } from "react";

function App() {
  const textbox = useRef(null);

  function adjustHeight() {
    textbox.current.style.height = "inherit";
    textbox.current.style.height = `${textbox.current.scrollHeight}px`;
  }

  useLayoutEffect(adjustHeight, []);

  function handleKeyDown(e) {
    adjustHeight();
  }

  return (
    <div>
      <header
        className="App-header"
        style={{
          display: "flex",
          justifyContent: "center",
          width: "470px",
          backgroundColor: "#fff",
          borderRadius: "5px",
          padding: "25px 25px 30px"
        }}
      >
        <div>
          <textarea
            ref={textbox}
            onChange={handleKeyDown}
            style={{
              width: "95%",
              padding: "15px",
              borderRadius: "5px",
              outline: "none",
              resize: "none"
            }}
          />
        </div>
      </header>
    </div>
  );
}

export default App;

in handleKeyDown, consider calling props.onChange if onChange is passed in. Now you can control the component. — Mke Spa Guy, Mar 06 '23 at 16:38

how to dinamically resize a textarea in react

1 Answers1