File size: 3,041 Bytes
6e38ce1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | import React, { useEffect, useLayoutEffect, useRef } from "react";
interface AutoResizeTextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
value: string;
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
className: string;
minHeight?: string;
maxHeight?: string;
}
const AutoResizeTextarea: React.FC<AutoResizeTextareaProps> = ({
value,
onChange,
className,
minHeight = "30px",
maxHeight = "120px",
...props
}) => {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const observerRef = useRef<ResizeObserver | null>(null);
const adjustHeight = () => {
const textarea = textareaRef.current;
if (!textarea) return;
// Reset height to get the correct scrollHeight measurement
textarea.style.height = minHeight;
// Convert min and max heights to numbers for comparison
const minHeightPx = parseInt(minHeight);
const maxHeightPx = parseInt(maxHeight);
// Set the height to match content, bounded by min and max heights
const desiredHeight = Math.min(
Math.max(minHeightPx, textarea.scrollHeight),
maxHeightPx
);
textarea.style.height = `${desiredHeight}px`;
// Add scrollbar if content exceeds maxHeight
textarea.style.overflowY =
textarea.scrollHeight > maxHeightPx ? "auto" : "hidden";
};
// Initial height adjustment using useLayoutEffect to prevent flash
useLayoutEffect(() => {
adjustHeight();
}, []);
// Adjust height when value changes
useEffect(() => {
adjustHeight();
}, [value]);
// Setup resize observer and window resize handler
useEffect(() => {
const textarea = textareaRef.current;
if (!textarea) return;
// Create resize observer
observerRef.current = new ResizeObserver(() => {
adjustHeight();
});
// Observe both the textarea and its parent element
observerRef.current.observe(textarea);
if (textarea.parentElement) {
observerRef.current.observe(textarea.parentElement);
}
// Handle window resize
const handleResize = () => adjustHeight();
window.addEventListener("resize", handleResize);
// Setup intersection observer for visibility changes
const intersectionObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
adjustHeight();
}
});
},
{ threshold: 0.1 }
);
intersectionObserver.observe(textarea);
return () => {
window.removeEventListener("resize", handleResize);
if (observerRef.current) {
observerRef.current.disconnect();
}
intersectionObserver.disconnect();
};
}, []);
return (
<textarea
ref={textareaRef}
value={value}
onChange={onChange}
className={className}
style={{
minHeight,
maxHeight,
overflowY: "auto",
resize: "none",
...props.style,
}}
{...props}
/>
);
};
export default AutoResizeTextarea;
|