@@ -2,21 +2,52 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
2
2
import { useDebounce , useResizeObserver } from "./hooks.js" ;
3
3
4
4
export type FitterProps = {
5
+ /**
6
+ * The content to fit.
7
+ */
5
8
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
+ */
6
13
minSize ?: number ;
14
+ /**
15
+ * The maximum number of lines that the text will shrink to fit.
16
+ */
7
17
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
+ */
8
25
settlePrecision ?: number ;
26
+ /**
27
+ * Whether to update the text size when the size of the component changes.
28
+ */
9
29
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 ;
11
37
} ;
12
38
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
+ */
13
44
export const Fitter = ( {
14
45
children,
15
46
minSize = 0.25 ,
16
47
maxLines = 1 ,
17
48
settlePrecision = 0.01 ,
18
49
updateOnSizeChange = true ,
19
- windowResizeDebounce = 100 ,
50
+ resizeDebounceTime = 100 ,
20
51
} : FitterProps ) => {
21
52
const wrapperRef = useRef < HTMLDivElement > ( null ) ;
22
53
const textRef = useRef < HTMLSpanElement > ( null ) ;
@@ -61,7 +92,7 @@ export const Fitter = ({
61
92
const start = useDebounce ( ( ) => {
62
93
setTargetMax ( 1 ) ;
63
94
setSettled ( false ) ;
64
- } , windowResizeDebounce ) ;
95
+ } , resizeDebounceTime ) ;
65
96
66
97
useResizeObserver ( wrapperRef , ( ) => start ( ) , updateOnSizeChange ) ;
67
98
0 commit comments