Skip to content

Commit a97596e

Browse files
committed
fix: add documentation to props
1 parent a7ea97f commit a97596e

File tree

1 file changed

+34
-3
lines changed

1 file changed

+34
-3
lines changed

lib/Fitter.tsx

+34-3
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,52 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
22
import { useDebounce, useResizeObserver } from "./hooks.js";
33

44
export type FitterProps = {
5+
/**
6+
* The content to fit.
7+
*/
58
children: ReactNode;
9+
/**
10+
* The minimum scale that the text will shrink to. E.g. 0.25 means the text
11+
* will shrink to no less than 25% of its original size.
12+
*/
613
minSize?: number;
14+
/**
15+
* The maximum number of lines that the text will shrink to fit.
16+
*/
717
maxLines?: number;
18+
/**
19+
* The precision at which the text will settle. The component finds the best
20+
* size by halving the difference between the current size and the min/max
21+
* size. If the difference is less than the settle precision, the component
22+
* will stop and settle on that size. A value of 0.01 means the component will
23+
* settle when the difference is less than 1%.
24+
*/
825
settlePrecision?: number;
26+
/**
27+
* Whether to update the text size when the size of the component changes.
28+
*/
929
updateOnSizeChange?: boolean;
10-
windowResizeDebounce?: number;
30+
/**
31+
* The time to wait before updating the text size when the size of the
32+
* component changes. This is useful when the component is being resized
33+
* frequently and you want to avoid updating the text size on every resize
34+
* event.
35+
*/
36+
resizeDebounceTime?: number;
1137
};
1238

39+
/**
40+
* A utility component that fits text to a container by finding the best text
41+
* size through binary search. The text will never grow larger than the original
42+
* size and will shrink to fit the container.
43+
*/
1344
export const Fitter = ({
1445
children,
1546
minSize = 0.25,
1647
maxLines = 1,
1748
settlePrecision = 0.01,
1849
updateOnSizeChange = true,
19-
windowResizeDebounce = 100,
50+
resizeDebounceTime = 100,
2051
}: FitterProps) => {
2152
const wrapperRef = useRef<HTMLDivElement>(null);
2253
const textRef = useRef<HTMLSpanElement>(null);
@@ -61,7 +92,7 @@ export const Fitter = ({
6192
const start = useDebounce(() => {
6293
setTargetMax(1);
6394
setSettled(false);
64-
}, windowResizeDebounce);
95+
}, resizeDebounceTime);
6596

6697
useResizeObserver(wrapperRef, () => start(), updateOnSizeChange);
6798

0 commit comments

Comments
 (0)