react-use-fittext

A powerful React hook that automatically adjusts font size to fit text within its container. Perfect for responsive typography that scales beautifully across different screen sizes and container dimensions.

![npm version](https://badge.fury.io/js/react-use-fittext)
![License: MIT](https://opensource.org/licenses/MIT)

✨ Features

- 📏 Automatic font sizing - Text scales to fit perfectly within container bounds
- 🔄 Responsive by default - Uses ResizeObserver for real-time container changes
- ⚡️ High performance - Optimized with requestAnimationFrame and binary search algorithm
- 📐 Flexible fit modes - Fit to width, height, or both dimensions
- 📝 Multi-line support - Works seamlessly with single-line and multi-line text
- ⏱️ Debounced updates - Configurable debounce for smooth performance
- 🎯 TypeScript support - Fully typed with comprehensive type definitions
- 🪶 Lightweight - Minimal bundle size with zero dependencies

📦 Installation

``bash npm install react-use-fittext`

`bash yarn add react-use-fittext`

`bash pnpm add react-use-fittext`

`🚀 Quick Start`

`jsx import { useFitText } from 'react-use-fittext';

function ResponsiveText() { const { containerRef, textRef, fontSize } = useFitText();

return (

      ref={containerRef} 
      style={{ 
        width: '300px', 
        height: '200px', 
        border: '1px solid #ccc',
        padding: '16px'
      }}
    >
      
        This text will automatically resize to fit!


  );
}


📖 Advanced Examples
$3

`jsx function SingleLineExample() { const { containerRef, textRef } = useFitText({ lineMode: 'single', minFontSize: 12, maxFontSize: 60 });

return (


      BREAKING NEWS


  );
}

$3

`jsx function WidthOnlyExample() { const { containerRef, textRef } = useFitText({ fitMode: 'width', maxFontSize: 48 });

return (


      
        This text will scale based on container width only,
        allowing vertical overflow if needed.


  );
}

$3

`jsx function PerformanceExample() { const { containerRef, textRef, fontSize } = useFitText({ debounceDelay: 50, // Faster response resolution: 1, // Higher precision minFontSize: 8, maxFontSize: 120 });

return (


      
        Current font size: {fontSize}px


  );
}

$3

`jsx function DynamicContentExample() { const [text, setText] = useState('Initial text'); const { containerRef, textRef } = useFitText({ fitMode: 'both', debounceDelay: 100 });

return (


              value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type to see text resize..."
      />
      
      
        {text}


  );
}


📚 API Reference
$3
#### Options

| Property | Type | Default | Description | |----------|------|---------|-------------| |minFontSize | number | 1| Minimum font size in pixels | |maxFontSize | number | 100| Maximum font size in pixels | |resolution | number | 0.5| Precision of the binary search algorithm (lower = more precise) | |fitMode | 'width' \| 'height' \| 'both' | 'both'| Which dimensions to fit the text into | |lineMode | 'single' \| 'multi' | 'multi'| Whether to allow text wrapping | |debounceDelay | number | 100 | Debounce delay in milliseconds for resize events |

#### Return Value

| Property | Type | Description | |----------|------|-------------| |containerRef | RefObject| Attach to the container element | |textRef | RefObject| Attach to the text element | |fontSize | number | Current calculated font size in pixels |

`🎛️ Fit Modes`

`$3`


Text scales to fit within both width and height constraints of the container.
$3

Text scales based only on container width. Height can grow as needed.
$3

Text scales based only on container height. Width can grow as needed.
📝 Line Modes
$3

Allows text to wrap across multiple lines. Text will break naturally at word boundaries.
$3

Forces text to remain on a single line. Long text will be truncated with ellipsis if it exceeds container width.
⚡ Performance Tips

1. Adjust debounceDelay- Lower values (50-100ms) for faster response, higher values (200-300ms) for better performance 2. Tuneresolution - Use 1 for pixel-perfect sizing, 0.5 for good balance, 2-3for faster calculations 3. Choose appropriatefitMode - Use 'width' or 'height' instead of 'both'when you only need single-axis fitting 4. Set reasonable bounds - UseminFontSize and maxFontSize to prevent extreme scaling

`🔧 Common Patterns`

`$3`

jsx
const { containerRef, textRef } = useFitText({
  lineMode: 'single',
  fitMode: 'width',
  minFontSize: 14,
  maxFontSize: 24
});

$3

jsx
const { containerRef, textRef } = useFitText({
  fitMode: 'both',
  minFontSize: 32,
  maxFontSize: 96,
  debounceDelay: 50
});

$3

jsx
const { containerRef, textRef } = useFitText({
  lineMode: 'single',
  fitMode: 'width',
  minFontSize: 10,
  maxFontSize: 16
});


🐛 Troubleshooting

Text not resizing? - Ensure the container has defined dimensions (width/height) - Check that bothcontainerRef and textRefare properly attached - Verify the container is visible in the DOM

Performance issues? - IncreasedebounceDelayto reduce calculation frequency - Increaseresolutionfor faster (but less precise) calculations - Consider usingfitMode: 'width' or 'height' instead of 'both'

Text overflowing? - Check that container hasoverflow: hiddenif needed - EnsureminFontSize` isn't too large for the container
- Verify container padding is accounted for in your layout

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License

MIT © akozma89

react-use-fittext

![npm version](https://badge.fury.io/js/react-use-fittext)
![License: MIT](https://opensource.org/licenses/MIT)

✨ Features

📦 Installation

``bash npm install react-use-fittext`

`bash yarn add react-use-fittext`

`bash pnpm add react-use-fittext`

`🚀 Quick Start`

`jsx import { useFitText } from 'react-use-fittext';

function ResponsiveText() { const { containerRef, textRef, fontSize } = useFitText();

return (

      ref={containerRef} 
      style={{ 
        width: '300px', 
        height: '200px', 
        border: '1px solid #ccc',
        padding: '16px'
      }}
    >
      
        This text will automatically resize to fit!


  );
}


📖 Advanced Examples
$3

`jsx function SingleLineExample() { const { containerRef, textRef } = useFitText({ lineMode: 'single', minFontSize: 12, maxFontSize: 60 });

return (


      BREAKING NEWS


  );
}

$3

`jsx function WidthOnlyExample() { const { containerRef, textRef } = useFitText({ fitMode: 'width', maxFontSize: 48 });

return (


      
        This text will scale based on container width only,
        allowing vertical overflow if needed.


  );
}

$3

return (


      
        Current font size: {fontSize}px


  );
}

$3

`jsx function DynamicContentExample() { const [text, setText] = useState('Initial text'); const { containerRef, textRef } = useFitText({ fitMode: 'both', debounceDelay: 100 });

return (


              value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type to see text resize..."
      />
      
      
        {text}


  );
}


📚 API Reference
$3
#### Options

#### Return Value

`🎛️ Fit Modes`

`$3`


Text scales to fit within both width and height constraints of the container.
$3

Text scales based only on container width. Height can grow as needed.
$3

Text scales based only on container height. Width can grow as needed.
📝 Line Modes
$3

Allows text to wrap across multiple lines. Text will break naturally at word boundaries.
$3

Forces text to remain on a single line. Long text will be truncated with ellipsis if it exceeds container width.
⚡ Performance Tips

`🔧 Common Patterns`

`$3`

jsx
const { containerRef, textRef } = useFitText({
  lineMode: 'single',
  fitMode: 'width',
  minFontSize: 14,
  maxFontSize: 24
});

$3

jsx
const { containerRef, textRef } = useFitText({
  fitMode: 'both',
  minFontSize: 32,
  maxFontSize: 96,
  debounceDelay: 50
});

$3

jsx
const { containerRef, textRef } = useFitText({
  lineMode: 'single',
  fitMode: 'width',
  minFontSize: 10,
  maxFontSize: 16
});


🐛 Troubleshooting

Text not resizing? - Ensure the container has defined dimensions (width/height) - Check that bothcontainerRef and textRefare properly attached - Verify the container is visible in the DOM

Text overflowing? - Check that container hasoverflow: hiddenif needed - EnsureminFontSize` isn't too large for the container
- Verify container padding is accounted for in your layout

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.