useTextFit & fitText

A very simple React Hook and helper function to dynamically adjust the font size of an HTML element to fit its container. It uses a binary search algorithm for efficiency. Works right out of the box.

View Demo on CodeSandbox

Table of Contents

• Installation
• Usage
  • useTextFit
  • fitText
• Examples
• License

Installation

Install the package via npm:

1npm install use-simple-text-fit

Or if you prefer yarn:

1yarn add use-simple-text-fit

Usage

useTextFit

A React Hook to automatically adjust the font size of an HTML element so that it fits its container.

Syntax

1const [ref, fit] = useTextFit(options?, deps?)

Parameters

• options: An object containing min and max font sizes (optional).
• deps: React dependency array for the effect (optional).

Return Value

• ref: A React ref to be attached to the HTML element.
• fit: A function that can be called to manually trigger a resize.

fitText

A helper function to manually adjust the font size of an HTML element so that it fits its container.

Syntax

1fitText(element, min, max)

Parameters

• element: The HTML element to adjust.
• min: Minimum font size.
• max: Maximum font size.

Examples

Using useTextFit

1import { useTextFit } from 'use-simple-text-fit';
2
3const MyComponent = () => {
4  const [ref, fit] = useTextFit();
5  
6  // Use fit to trigger a resize manually, or pass a dependency array to useTextFit
7
8  return (
9    <div ref={ref}>
10      Text to fit
11    </div>
12  );
13}

Using fitText

1import { fitText } from 'use-simple-text-fit';
2
3const element = document.querySelector('.my-element');
4fitText(element, 10, 50);

License

MIT