Last active
February 27, 2023 02:47
-
-
Save lawrencecchen/0aa83c84b5f591c736fbce392789b65c to your computer and use it in GitHub Desktop.
autosize with react
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import autosize from "autosize"; | |
import { forwardRef, useEffect, useRef } from "react"; | |
const AutosizeTextarea = forwardRef< | |
HTMLTextAreaElement, | |
React.DetailedHTMLProps< | |
React.TextareaHTMLAttributes<HTMLTextAreaElement>, | |
HTMLTextAreaElement | |
> & { | |
onResize?: (target: HTMLTextAreaElement) => void; | |
} | |
>((props, ref) => { | |
const { onResize } = props; | |
const textareaRef = useRef<HTMLTextAreaElement | null>(null); | |
useEffect(() => { | |
function handleResize() { | |
if (textareaRef.current && onResize) { | |
onResize(textareaRef.current); | |
} | |
} | |
const target = textareaRef.current; | |
if (target) { | |
autosize(target); | |
target.addEventListener("autosize:resized", handleResize); | |
return () => { | |
autosize.destroy(target); | |
target.removeEventListener("autosize:resized", handleResize); | |
}; | |
} | |
}, [onResize]); | |
return ( | |
<textarea | |
{...props} | |
ref={(node) => { | |
textareaRef.current = node; | |
if (typeof ref === "function") { | |
ref(node); | |
} else if (ref) { | |
ref.current = node; | |
} | |
}} | |
/> | |
); | |
}); | |
AutosizeTextarea.displayName = "AutosizeTextarea"; | |
export default AutosizeTextarea; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment