Skip to content

feat: expose rowHeight from onHeightChange #284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Andarist merged 5 commits into from
Jun 30, 2020
Merged

feat: expose rowHeight from onHeightChange #284

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e888e7a
feat: expose rowHeight from onHeightChange
emmenko Jun 30, 2020
38d60a2
docs: add changeset
emmenko Jun 30, 2020
a878b60
refactor: use tuple
emmenko Jun 30, 2020
af7b1df
docs: update readme
emmenko Jun 30, 2020
4d0fdcd
Update .changeset/fair-bobcats-matter.md
Andarist Jun 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fair-bobcats-matter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 7 additions & 2 deletions src/calculateNodeHeight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { SizingData } from './getSizingData';
import forceHiddenStyles from './forceHiddenStyles';

export type CalculatedNodeHeights = {
height: number;
rowHeight: number;
};

let hiddenTextarea: HTMLTextAreaElement | null = null;

const getHeight = (node: HTMLElement, sizingData: SizingData): number => {
Expand All @@ -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');
Expand Down Expand Up @@ -61,5 +66,5 @@ export default function calculateNodeHeight(
}
height = Math.min(maxHeight, height);

return height;
return { height, rowHeight };
}
9 changes: 6 additions & 3 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down Expand Up @@ -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,
Expand All @@ -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 });
}
};

Expand Down