autosize-textarea

1"use client";
2import { cn } from "@/lib/utils";
3import * as React from "react";
4import { useImperativeHandle } from "react";
5
6interface UseAutosizeTextAreaProps {
7  textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
8  minHeight?: number;
9  maxHeight?: number;
10  triggerAutoSize: string;
11}
12
13export const useAutosizeTextArea = ({
14  textAreaRef,
15  triggerAutoSize,
16  maxHeight = Number.MAX_SAFE_INTEGER,
17  minHeight = 0,
18}: UseAutosizeTextAreaProps) => {
19  const [init, setInit] = React.useState(true);
20  React.useEffect(() => {
21    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
22    const offsetBorder = 2;
23    const textAreaElement = textAreaRef.current;
24    if (textAreaElement) {
25      if (init) {
26        textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;
27        if (maxHeight > minHeight) {
28          textAreaElement.style.maxHeight = `${maxHeight}px`;
29        }
30        setInit(false);
31      }
32      textAreaElement.style.height = `${minHeight + offsetBorder}px`;
33      const scrollHeight = textAreaElement.scrollHeight;
34      // We then set the height directly, outside of the render loop
35      // Trying to set this with state or a ref will product an incorrect value.
36      if (scrollHeight > maxHeight) {
37        textAreaElement.style.height = `${maxHeight}px`;
38      } else {
39        textAreaElement.style.height = `${scrollHeight + offsetBorder}px`;
40      }
41    }
42  }, [textAreaRef.current, triggerAutoSize]);
43};
44
45export type AutosizeTextAreaRef = {
46  textArea: HTMLTextAreaElement;
47  maxHeight: number;
48  minHeight: number;
49};
50
51type AutosizeTextAreaProps = {
52  maxHeight?: number;
53  minHeight?: number;
54} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
55
56export const AutosizeTextarea = React.forwardRef<
57  AutosizeTextAreaRef,
58  AutosizeTextAreaProps
59>(
60  (
61    {
62      maxHeight = Number.MAX_SAFE_INTEGER,
63      minHeight = 52,
64      className,
65      onChange,
66      value,
67      ...props
68    }: AutosizeTextAreaProps,
69    ref: React.Ref<AutosizeTextAreaRef>,
70  ) => {
71    const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
72    const [triggerAutoSize, setTriggerAutoSize] = React.useState("");
73
74    useAutosizeTextArea({
75      textAreaRef,
76      triggerAutoSize: triggerAutoSize,
77      maxHeight,
78      minHeight,
79    });
80
81    useImperativeHandle(ref, () => ({
82      textArea: textAreaRef.current as HTMLTextAreaElement,
83      focus: () => textAreaRef?.current?.focus(),
84      maxHeight,
85      minHeight,
86    }));
87
88    React.useEffect(() => {
89      setTriggerAutoSize(value as string);
90    }, [props?.defaultValue, value]);
91
92    return (
93      <textarea
94        {...props}
95        value={value}
96        ref={textAreaRef}
97        className={cn(
98          "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
99          className,
100        )}
101        onChange={(e) => {
102          setTriggerAutoSize(e.target.value);
103          onChange?.(e);
104        }}
105      />
106    );
107  },
108);
109AutosizeTextarea.displayName = "AutosizeTextarea";
110