use-simple-text-fit
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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

Install the package via npm:

npm install use-simple-text-fit

Or if you prefer yarn:

yarn 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

const [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

fitText(element, min, max)

Parameters

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

Examples

Using useTextFit

import { useTextFit } from 'use-simple-text-fit';

const MyComponent = () => {
  const [ref, fit] = useTextFit();
  
  // Use fit to trigger a resize manually, or pass a dependency array to useTextFit

  return (
    <div ref={ref}>
      Text to fit
    </div>
  );
}

Using fitText

import { fitText } from 'use-simple-text-fit';

const element = document.querySelector('.my-element');
fitText(element, 10, 50);

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i use-simple-text-fit

Weekly Downloads

19

Version

1.0.2

License

MIT

Unpacked Size

7.21 kB

Total Files

7

Last publish

Collaborators

  • strblr