Skip to content

Commit

Permalink
fix: add documentation to props
Browse files Browse the repository at this point in the history
  • Loading branch information
scriptcoded committed Nov 1, 2024
1 parent a7ea97f commit a97596e
Showing 1 changed file with 34 additions and 3 deletions.
37 changes: 34 additions & 3 deletions lib/Fitter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,52 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
import { useDebounce, useResizeObserver } from "./hooks.js";

export type FitterProps = {
/**
* The content to fit.
*/
children: ReactNode;
/**
* The minimum scale that the text will shrink to. E.g. 0.25 means the text
* will shrink to no less than 25% of its original size.
*/
minSize?: number;
/**
* The maximum number of lines that the text will shrink to fit.
*/
maxLines?: number;
/**
* The precision at which the text will settle. The component finds the best
* size by halving the difference between the current size and the min/max
* size. If the difference is less than the settle precision, the component
* will stop and settle on that size. A value of 0.01 means the component will
* settle when the difference is less than 1%.
*/
settlePrecision?: number;
/**
* Whether to update the text size when the size of the component changes.
*/
updateOnSizeChange?: boolean;
windowResizeDebounce?: number;
/**
* The time to wait before updating the text size when the size of the
* component changes. This is useful when the component is being resized
* frequently and you want to avoid updating the text size on every resize
* event.
*/
resizeDebounceTime?: number;
};

/**
* A utility component that fits text to a container by finding the best text
* size through binary search. The text will never grow larger than the original
* size and will shrink to fit the container.
*/
export const Fitter = ({
children,
minSize = 0.25,
maxLines = 1,
settlePrecision = 0.01,
updateOnSizeChange = true,
windowResizeDebounce = 100,
resizeDebounceTime = 100,
}: FitterProps) => {
const wrapperRef = useRef<HTMLDivElement>(null);
const textRef = useRef<HTMLSpanElement>(null);
Expand Down Expand Up @@ -61,7 +92,7 @@ export const Fitter = ({
const start = useDebounce(() => {
setTargetMax(1);
setSettled(false);
}, windowResizeDebounce);
}, resizeDebounceTime);

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

Expand Down

0 comments on commit a97596e

Please sign in to comment.