Added { rowHeight: number } as a second parameter to the `onHeightC…

…hange` callback (#284) * feat: expose rowHeight from onHeightChange * docs: add changeset * refactor: use tuple * docs: update readme * Update .changeset/fair-bobcats-matter.md Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
Andarist · Jun 30, 2020 · a1fc99f · a1fc99f
1 parent cb07cdd
commit a1fc99f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/.changeset/fair-bobcats-matter.md b/.changeset/fair-bobcats-matter.md
@@ -0,0 +1,5 @@
+---
+'react-textarea-autosize': minor
+---
+
+Added `{ rowHeight: number }` as a second parameter to the `onHeightChange` callback. This is useful to construct custom behaviors according to the height values.
diff --git a/README.md b/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.
 

diff --git a/src/calculateNodeHeight.ts b/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];
 }
diff --git a/src/index.tsx b/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 });
     }
   };