packages/components/hooks/useAutoGrow.ts

   1 import { useCallback, useState } from 'react';
   2
   3 const getTextAreaRows = ({ el, minRows, maxRows }: { el: HTMLTextAreaElement; minRows: number; maxRows: number }) => {
   4     const textAreaLineHeight = +getComputedStyle(el).lineHeight.replace('px', '');
   5
   6     const previousRows = el.rows;
   7
   8     // Reset rows so we can calculate calculate currentRows correctly
   9     el.rows = minRows;
  10
  11     const currentRows = Math.min(maxRows, Math.max(minRows, ~~(el.scrollHeight / textAreaLineHeight)));
  12
  13     // Set rows attribute directly because React won't update it as it stayed the same
  14     if (currentRows === previousRows) {
  15         el.rows = currentRows;
  16     }
  17
  18     return currentRows;
  19 };
  20
  21 const useAutoGrow = ({ maxRows = 5, minRows = 1, autoGrow = false }) => {
  22     const [rows, setRows] = useState(minRows);
  23
  24     const updateTextArea = useCallback(
  25         (el: HTMLTextAreaElement) => {
  26             setRows(getTextAreaRows({ el, minRows, maxRows }));
  27         },
  28         [minRows, maxRows]
  29     );
  30
  31     if (!autoGrow) {
  32         return {
  33             rows: maxRows,
  34         };
  35     }
  36
  37     return { rows, updateTextArea };
  38 };
  39
  40 export default useAutoGrow;