Request to add autosizing to Textarea

Is your feature request related to a problem? Please describe. This is a pretty standard feature for textareas nowadays

Describe the solution you’d like Simply add maxRows and minRows as props, and auto-grow/shrink with content

Describe alternatives you’ve considered Currently going to have to implement react-textarea-autosize and figure out how to do the styling independent of Chakra 😢

[segunadebayo]

Here’s a solution I used recently on a project.

import { Textarea } from "@chakra-ui/core";
import ResizeTextarea from "react-textarea-autosize";
import React from "react";

export const AutoResizeTextarea = React.forwardRef((props, ref) => {
  return (
    <Textarea
      minH="unset"
      overflow="hidden"
      w="100%"
      resize="none"
      ref={ref}
      minRows={1}
      as={ResizeTextarea}
      {...props}
    />
  );
});

Hope you find this useful.

[Josscii]

Here’s a solution I used recently on a project.

import { Textarea } from "@chakra-ui/core";
import ResizeTextarea from "react-textarea-autosize";
import React from "react";

export const AutoResizeTextarea = React.forwardRef((props, ref) => {
  return (
    <Textarea
      minH="unset"
      overflow="hidden"
      w="100%"
      resize="none"
      ref={ref}
      minRows={1}
      as={ResizeTextarea}
      {...props}
    />
  );
});

Hope you find this useful.

for any one who wants a typescript version:

import { Textarea, TextareaProps } from "@chakra-ui/react";
import ResizeTextarea from "react-textarea-autosize";
import React from "react";

export const AutoResizeTextarea = React.forwardRef<
  HTMLTextAreaElement,
  TextareaProps
>((props, ref) => {
  return (
    <Textarea
      minH="unset"
      overflow="hidden"
      w="100%"
      resize="none"
      ref={ref}
      minRows={1}
      as={ResizeTextarea}
      {...props}
    />
  );
});