FitText.js (TypeScript)

A vanilla TypeScript port of the original FitText.js - makes font sizes flexible and responsive.

Credits

This project is a TypeScript port of the original FitText.js by @davatron5000. All credit for the original concept and implementation goes to the original authors.

Installation

``bash
npm install @taurien/fittext
`

Or with GitHub Packages:

`bash
npm install @taurien/fittext --registry=https://npm.pkg.github.com
`

Usage

`typescript
import { fitText } from "@taurien/fittext";

// Using an element reference
const element = document.getElementById("responsive-headline");
const controller = fitText(element, {
compressor: 1,
minFontSize: 12,
maxFontSize: 100,
});

// Or using a selector
fitText("#responsive-headline", {
compressor: 1.2,
});

// Manually trigger resize
controller.resizer();

// Clean up when done
controller.destroy();
`

Usage with React (TSX)

$3

`tsx
import React, { useEffect, useRef } from "react";
import { fitText, FitTextController } from "@taurien/fittext";

function ResponsiveHeadline() {
const headlineRef = useRef(null);
const controllerRef = useRef(null);

useEffect(() => {
if (headlineRef.current) {
controllerRef.current = fitText(headlineRef.current, {
compressor: 1.2,
minFontSize: 20,
maxFontSize: 100,
});
}

// Cleanup on unmount
return () => {
controllerRef.current?.destroy();
};
}, []);

return

Your Responsive Headline

;
}
`

$3

`tsx
import { useEffect, useRef, RefObject } from "react";
import { fitText, FitTextOptions, FitTextController } from "@taurien/fittext";

function useFitText(
options?: FitTextOptions
): RefObject {
const elementRef = useRef(null);
const controllerRef = useRef(null);

useEffect(() => {
if (elementRef.current) {
controllerRef.current = fitText(elementRef.current, options);
}

return () => {
controllerRef.current?.destroy();
};
}, [options]);

return elementRef;
}

// Usage:
function MyComponent() {
const headlineRef = useFitText({
compressor: 1,
minFontSize: 16,
maxFontSize: 80,
});

return

Responsive Text

;
}
`

$3

`tsx
import React, { useEffect, useRef, ReactNode } from "react";
import { fitText, FitTextOptions, FitTextController } from "@taurien/fittext";

interface FitTextComponentProps extends FitTextOptions {
children: ReactNode;
className?: string;
as?: keyof JSX.IntrinsicElements;
}

function FitTextComponent({
children,
className,
as: Tag = "div",
compressor,
minFontSize,
maxFontSize,
}: FitTextComponentProps) {
const elementRef = useRef(null);

useEffect(() => {
if (elementRef.current) {
const controller = fitText(elementRef.current, {
compressor,
minFontSize,
maxFontSize,
});

return () => controller.destroy();
}
}, [compressor, minFontSize, maxFontSize]);

return (

{children}

);
}

// Usage:
function App() {
return (
as="h1"
compressor={1.5}
minFontSize={20}
maxFontSize={100}
className="hero-title"
>
My Responsive Headline

);
}
`

API

$3

Parameters:

- element: HTMLElement | string - DOM element or CSS selector
- options: FitTextOptions (optional)
- compressor: number - Controls resize aggressiveness (default: 1)
- minFontSize: number - Minimum font size in pixels (default: no limit)
- maxFontSize: number - Maximum font size in pixels (default: no limit)

Returns: FitTextController

- resizer(): Manually trigger a resize calculation
- destroy()`: Remove event listeners and stop automatic resizing

License

MIT