React hook used to fit text in a div
npm install use-fit-textReact hook that iteratively adjusts the font size so that text will fit in a div.
- checks if text is overflowing by using scrollHeight and offsetHeight
- recalculates when container is resized (using (polyfilled) ResizeObserver)
- recalculates when content changes
- uses binary search; with default options, makes a maximum of 5 adjustments with a resolution of 5% font size from 20-100%
- < 4 kB minified + gzipped
- written in TypeScript
``
npm install --save use-fit-text
`js
import React from "react";
import useFitText from "use-fit-text";
function Example() {
const { fontSize, ref } = useFitText();
return (
Demo / example code
- Demo site: https://saltycrane.github.io/use-fit-text/
- Example code is in the
folderAPI
$3
- Returns an object with the following properties:
- fontSize (string) - the font size as a string (CSS percent) to be passed as the fontSize property of the style prop of the div
- (React.MutableRefObject) - the ref to be passed to the ref attribute of the div
- (optional) - an object with the following optional properties: -
logLevel (string, default: info) - one of debug, info, warn, error, or none
- (number, default: 100) - maximum font size in percent
- minFontSize (number, default: 20) - minimum font size in percent
- onFinish ((fontSize: number) => void, default: undefined) - function that is called when resizing
finishes. The final fontSize is passed to the function as an argument.
- onStart (() => void, default: undefined) - function that is called when resizing starts
- resolution (number, default: 5) - font size resolution to adjust to in percentQuestions
- Why doesn't it work with Flexbox
justify-content: flex-end;?
This appears to be a bug with Flexbox. Try using CSS Grid or margin-top: auto;
- What does the "reached without fitting text" message in the console mean?
This means use-fit-text was not able to fit the text using the minFontSize setting of 20. To ensure the text fits, set minFontSize to a smaller value.Changelog
- v2.4.0
- handle case where
minFontSize is set larger than the fontSize value needed to fit the text in the div. Log a message to the console in this case.
- fix final adjustment calcuation
- add logLevel option to control what is logged to the console
- v2.3.0
- automatically recalculate font size when content changes
- fix bug where a recalculation was not done on resize if the text initially fit in the div
- v2.2.0 - add onStart and onFinish callbacks
- v2.1.3 - export TOptions TypeScript type
- v2.1.2 - remove /// in dist/index.d.ts
- v2.1.0
- fix SSR/prerender issue where text did not resize
- suppress warning for server render
- v2.0.0
- use ResizeObserver to always recalculate on container resize
- remove recalcOnResize option
- useLayoutEffect instead of useEffect to avoid flashing
- v1.2.1 - fix scrollbar issue in example
- v1.2.0 - add recalcOnResize` and other options