import { useState , useCallback } from 'react' ; const getTextAreaRows = ( { el , minRows , maxRows } ) => { const textAreaLineHeight = + getComputedStyle ( el ) . lineHeight . replace ( 'px' , '' ) ; const previousRows = el . rows ; el . rows = minRows ; const currentRows = Math . min ( maxRows , Math . max ( minRows , ~ ~ ( el . scrollHeight / textAreaLineHeight ) ) ) ; if ( currentRows === previousRows ) { el . rows = currentRows ; } return currentRows ; } ; const useAutoGrow = ( { maxRows = 5 , minRows = 1 , autoGrow = false } ) => { const [ rows , setRows ] = useState ( minRows ) ; const updateTextArea = useCallback ( ( el ) => { setRows ( getTextAreaRows ( { el , minRows , maxRows } ) ) ; } , [ minRows , maxRows ] ) ; if ( ! autoGrow ) { return { rows : maxRows , } ; } return { rows , updateTextArea } ; } ; export default useAutoGrow ;