feat: expose rowHeight from onHeightChange

.changeset/fair-bobcats-matter.md

@@ -0,0 +1,5 @@
+---
+'react-textarea-autosize': minor
+---
+
+Expose `{ rowHeight: number }` as second argument of the callback function `onHeightChange`. This is useful to construct custom behaviors according to the height values.

README.md

@@ -36,12 +36,12 @@ https://andarist.github.io/react-textarea-autosize/
 
 ### Special props:
 
-| prop                | type      | description                                                                                |
-| ------------------- | --------- | ------------------------------------------------------------------------------------------ |
-| `maxRows`           | `number`  | Maximum number of rows upto which the textarea can grow                                    |
-| `minRows`           | `number`  | Minimum number of rows to show for textarea                                                |
-| `onHeightChange`    | `func`    | Function invoked on textarea height change, with height as first argument                  |
-| `cacheMeasurements` | `boolean` | Reuse previously computed measurements when computing height of textarea. Default: `false` |
+| prop                | type      | description                                                                                                                                                                                                                                        |
+| ------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `maxRows`           | `number`  | Maximum number of rows up to which the textarea can grow                                                                                                                                                                                           |
+| `minRows`           | `number`  | Minimum number of rows to show for textarea                                                                                                                                                                                                        |
+| `onHeightChange`    | `func`    | Function invoked on textarea height change, with height as first argument. The second function argument is an object containing additional information that might be useful for custom behaviors. Current options include `{ rowHeight: number }`. |
+| `cacheMeasurements` | `boolean` | Reuse previously computed measurements when computing height of textarea. Default: `false`                                                                                                                                                         |
 
 Apart from these, the component accepts all props that are accepted by `<textarea/>`, like `style`, `onChange`, `value`, etc.
 

src/calculateNodeHeight.ts

@@ -1,6 +1,11 @@
 import { SizingData } from './getSizingData';
 import forceHiddenStyles from './forceHiddenStyles';
 
+// TODO: use labelled tuples once they are avaiable:
+//   export type CalculatedNodeHeights = [height: number, rowHeight: number];
+// https://github.com/microsoft/TypeScript/issues/28259
+export type CalculatedNodeHeights = number[];
+
 let hiddenTextarea: HTMLTextAreaElement | null = null;
 
 const getHeight = (node: HTMLElement, sizingData: SizingData): number => {
@@ -20,7 +25,7 @@ export default function calculateNodeHeight(
   value: string,
   minRows = 1,
   maxRows = Infinity,
-): number {
+): CalculatedNodeHeights {
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement('textarea');
     hiddenTextarea.setAttribute('tab-index', '-1');
@@ -61,5 +66,5 @@ export default function calculateNodeHeight(
   }
   height = Math.min(maxHeight, height);
 
-  return height;
+  return [height, rowHeight];
 }

src/index.tsx

@@ -13,10 +13,13 @@ type Style = Omit<
   height?: number;
 };
 
+export type TextareaHeightChangeMeta = {
+  rowHeight: number;
+};
 export type TextareaAutosizeProps = Omit<TextareaProps, 'style'> & {
   maxRows?: number;
   minRows?: number;
-  onHeightChange?: (height: number) => void;
+  onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
   cacheMeasurements?: boolean;
   style?: Style;
 };
@@ -66,7 +69,7 @@ const TextareaAutosize: React.ForwardRefRenderFunction<
 
     measurementsCacheRef.current = nodeSizingData;
 
-    const height = calculateNodeHeight(
+    const [height, rowHeight] = calculateNodeHeight(
       nodeSizingData,
       node.value || node.placeholder || 'x',
       minRows,
@@ -76,7 +79,7 @@ const TextareaAutosize: React.ForwardRefRenderFunction<
     if (heightRef.current !== height) {
       heightRef.current = height;
       node.style.setProperty('height', `${height}px`, 'important');
-      onHeightChange(height);
+      onHeightChange(height, { rowHeight });
     }
   };