useAdaptiveTextarea
A React Hook that helps to create adaptive textarea that automatically adjust height based on its content.
Demo
Input in the textarea, and see the height of the textarea automatically adjust.
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const { ref, height, resize } = useAdaptiveTextarea(options)
Options
export interface UseAdaptiveTextareaOptions<T extends HTMLElement = HTMLElement> {
/**
* a list of dependencies to trigger the resize
*
* @defaultValue []
*/
watch?: DependencyList
/**
* a list of events to trigger the resize
*
* @defaultValue ['input']
*/
events?: (keyof HTMLElementEventMap)[]
/**
* whether to automatically adjust the height of the `textarea` element
*
* @defaultValue true
*/
autoHeight?: boolean
/**
* a target element to apply the height style
*
* @defaultValue undefined
*/
styleTarget?: ElementTarget<T>
/**
* a style property to apply the height value
*
* @defaultValue 'height'
*/
styleProp?: 'height' | 'minHeight'
/**
* a callback function to be called when the height of the `textarea` element changes
*
* @defaultValue undefined
*/
onResize?: (height: number, prevHeight: number) => void
}
Returns
export interface UseAdaptiveTextareaReturns {
/**
* a React ref that should be passed to the `textarea` element
*/
ref: React.RefObject<HTMLTextAreaElement | null>
/**
* the current height of the `textarea` element
*/
height: number
/**
* a function to manually resize the `textarea` element
*
* @returns {void} `void`
*/
resize(): void
}
