diff --git a/.changeset/fair-bobcats-matter.md b/.changeset/fair-bobcats-matter.md
new file mode 100644
index 00000000..f03aef16
--- /dev/null
+++ 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
index 18de3a21..3263d9bb 100644
--- 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 ``, like `style`, `onChange`, `value`, etc.
diff --git a/src/calculateNodeHeight.ts b/src/calculateNodeHeight.ts
index d990b62c..418d3f07 100644
--- 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
index f07f4ecd..250a87ca 100644
--- 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 & {
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 });
}
};