React hook that iteratively adjusts the font size so that text will fit in a div.
- checks if text is overflowing by using
scrollHeight
andoffsetHeight
- 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
import React from "react";
import useFitText from "use-fit-text";
function Example() {
const { fontSize, ref } = useFitText();
return (
<div ref={ref} style={{ fontSize, height: 40, width: 100 }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
);
}
maxFontSize
(default:100
) - maximum font size in percentminFontSize
(default:20
) - minimum font size in percentonFinish
(default:undefined
) - function that is called when resizing finishes. The final fontSize is passed to the function as an argument.onStart
(default:undefined
) - function that is called when resizing startsresolution
(default:5
) - font size resolution to adjust to in percent
See the example code in /examples
.
- Why doesn't it work with Flexbox
justify-content: flex-end;
? This appears to be a bug with Flexbox. Try using CSS Grid ormargin-top: auto;
- 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
andonFinish
callbacks - v2.1.3 - export
TOptions
TypeScript type - v2.1.2 - remove
/// <reference types="next" />
indist/index.d.ts
- v2.1.0
- fix SSR/prerender issue where text did not resize
- suppress
useLayoutEffect
warning for server render
- v2.0.0
- use
ResizeObserver
to always recalculate on container resize - remove
recalcOnResize
option useLayoutEffect
instead ofuseEffect
to avoid flashing
- use
- v1.2.1 - fix scrollbar issue in example
- v1.2.0 - add
recalcOnResize
and other options - v1.1.0 - fix binary search bug
- v1.0.2 - add example
- v1.0.0 - initial release