A DIFFERENT METHOD WITHOUT USING ADDITIONAL LIBRARIES

export class customTextarea extends React.Component {
  adjustHeightOnKeyDown(e) {
    e.target.style.height = 'inherit';
    e.target.style.height = `${e.target.scrollHeight}px`; 
    // Adjust height based on content
    // e.target.style.height = `${Math.min(e.target.scrollHeight, limit)}px`;
  }

  render() {
    return <textarea onKeyDown={this.adjustHeightOnKeyDown} />;
  }
}

If the text is deleted and the textarea doesn't shrink back, it might be because you missed setting this line:

e.target.style.height = 'inherit';

Using onKeyDown may be a better choice as it works for all keys compared to other methods (w3schools)

In scenarios with padding or border on top or bottom. (reference)

adjustHeightOnKeyDown(e) {
    // Reset field height
    e.target.style.height = 'inherit';

    // Get the computed styles for the element
    const computed = window.getComputedStyle(e.target);

    // Calculate the height
    const height = parseInt(computed.getPropertyValue('border-top-width'), 10)
                 + parseInt(computed.getPropertyValue('padding-top'), 10)
                 + e.target.scrollHeight
                 + parseInt(computed.getPropertyValue('padding-bottom'), 10)
                 + parseInt(computed.getPropertyValue('border-bottom-width'), 10);

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

I trust this information proves useful.

To automatically adjust the height of a textarea based on its content, you can utilize the useEffect hook to dynamically update the height:

import React, { useEffect, useRef, useState} from "react";
const defaultStyle = {
    display: "block",
    overflow: "hidden",
    resize: "none",
    width: "100%",
    backgroundColor: "mediumSpringGreen"
};

const AutoHeightTextarea = ({ style = defaultStyle, ...etc }) => {
    const textareaRef = useRef(null);
    const [currentValue, setCurrentValue ] = useState("");// you can manage data with it

    useEffect(() => {
        textareaRef.current.style.height = "0px";
        const scrollHeight = textareaRef.current.scrollHeight;
        textareaRef.current.style.height = scrollHeight + "px";
    }, [currentValue]);

    return (
        <textarea
            ref={textareaRef}
            style={style}
            {...etc}
            value={currentValue}

            onChange={e=>{
            setCurrentValue(e.target.value);
            //to do something with value, maybe callback?
            }}
        />
    );
};

export default AutoHeightTextarea;

If you're looking for a straightforward solution, consider leveraging hooks like "useRef()".

Here's the CSS code snippet:

.text-area {
   resize: none;
   overflow: hidden;
   min-height: 30px;
}

And here's the React component implementation:

export default () => {
 const textRef = useRef<any>();

 const onChangeHandler = function(e: SyntheticEvent) {
  const target = e.target as HTMLTextAreaElement;
  textRef.current.style.height = "30px";
  textRef.current.style.height = `${target.scrollHeight}px`;
 };

 return (
   <div>
    <textarea
      ref={textRef}
      onChange={onChangeHandler}
      className="text-area"
     />
    </div>
  );
};

You have the ability to achieve this using react refs by assigning a ref to an element

<textarea ref={this.textAreaRef}></textarea> // after react 16.3
<textarea ref={textAreaRef=>this.textAreaRef = textAreaRef}></textarea> // before react 16.3

You can then adjust the height in componentDidMount or componentDidUpdate according to your requirements. Like so,

if (this.textAreaRef) this.textAreaRef.style.height = this.textAreaRef.scrollHeight + "px";

indeed, this can be resolved with the help of useState and useEffect

function AutoAdjustTextarea({minRows}) {
  const [rows, setRows] = React.useState(minRows);
  const [value, setValue] = React.useState("");
  
  React.useEffect(() => {
    const rowLength = value.split("\n");

    if (rowLength.length > minRows) {
      setRows(rowLength.length);
    }
  }, [value]);

  return (
    <textarea rows={rows} onChange={(text) => setValue(text.target.value)} />
  );
}

Implementation

<AutoAdjustTextarea minRows={10} />

import { useRef, useState } from "react"
const CustomTextArea = () => {
  const [textValue, setTextValue] = useState("")
  const textRef = useRef(null)

  const adjustTextHeight = () => {
    const scrollHeight = textRef.current.scrollHeight;
    textRef.current.style.height = scrollHeight + "px";
  };

  const handleTextChange = () => {
    setTextValue(textRef.current.value)
    adjustTextHeight()
  }

  return (
    <textarea
      ref={textRef}
      value={textValue}
      onChange={handleTextChange}
      onKeyDown={(e) => {
        if (e.key === "Enter") {
          submitForm(e);
          textRef.current.style.height = "40px";
        }
      }}
     />
  )}

Here's a super easy solution:

function enableDynamicTextareaResizing() {
  let textareas = document.getElementsByTagName('textarea');
  for (let i = 0; i < textareas.length; i++) {
    textareas[i].style.height = textareas[i].scrollHeight + 'px';
    textareas[i].addEventListener('input', (e) => {
      e.target.style.height = textareas[i].scrollHeight + 'px';
    });
  }
}

// Make sure to call this function after all elements are loaded, 
// such as in the componentDidMount() method of your main class.

This code adds an event listener to each textarea element. Whenever new input is detected, it triggers a function that adjusts the height of the textarea based on its scrollHeight property. This allows for dynamic resizing of textareas with overflowing content.

Remember to call this function at the right time, ideally after everything is fully rendered in React or populated in JavaScript. The componentDidMount() method in your main component would be a suitable place to do this.

Utilizing this code snippet, I find that using this.yourRef.current.offsetHeight is quite effective. Unlike a regular

<div style={{height:"min-content"}}>{this.state.message}</div>

, a textarea does not respond to height:min-content. This leads me to avoid

uponResize = () => {
 clearTimeout(this.timeout);
  this.timeout = setTimeout(
   this.getHeightOfText.current &&
   this.setState({
    heightOfText: this.getHeightOfText.current.offsetHeight
   }),
  20
 );
};
componentDidMount = () => {
 window.addEventListener('resize', this.uponResize, /*true*/)
}
componentWillUnmount = () => {
 window.removeEventListener('resize', this.uponResize)
}

and instead opt for

componentDidUpdate = () => {
 if(this.state.lastMessage!==this.state.message){
  this.setState({
   lastMessage:this.state.message,
   height:this.yourRef.current.offsetHeight
  })
 }
}

by utilizing a hidden div

<div
 ref={this.yourRef}
 style={{
  height:this.state.height,
  width:"100%",
  opacity:0,
  zIndex:-1,
  whiteSpace: "pre-line"
 })
>
 {this.state.message}
</div>

Implementing autogrow textarea with hooks and typescript :

import { useEffect, useRef } from 'react';
import type { DetailedHTMLProps, TextareaHTMLAttributes } from 'react';

// adapted from : https://stackoverflow.com/a/5346855/14223224
export const DynamicTextarea = (props: DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>) => {
  const ref = useRef<HTMLTextAreaElement>(null);
  let topPadding = 0;
  let bottomPadding = 0;

  const resize = () => {
    ref.current.style.height = 'auto';
    ref.current.style.height = ref.current.scrollHeight - topPadding - bottomPadding + 'px';
  };

  const delayedResize = () => {
    window.setTimeout(resize, 0);
  };

  const getPropertyValue = (it: string) => {
    return Number.parseFloat(window.getComputedStyle(ref.current).getPropertyValue(it));
  };

  useEffect(() => {
    [topPadding, bottomPadding] = ['padding-top', 'padding-bottom'].map(getPropertyValue);

    ref.current.focus();
    ref.current.select();
    resize();
  }, []);

  return <textarea ref={ref} onChange={resize} onCut={delayedResize} onPaste={delayedResize} onDrop={delayedResize} onKeyDown={delayedResize} rows={1} {...props} />;
};