Dynamic Text Resizing

This code implements a React component that dynamically adjusts the font size of text to perfectly fit within its parent container. It solves the common problem of text overflowing its boundaries, ensuring readability regardless of screen size or container dimensions. The component uses a binary search algorithm to efficiently determine the optimal font size. Here's how it works: 1. **Initialization:** The component uses `useRef` to access the container and text elements directly. `useEffect` adds a resize listener to the window, triggering a font size recalculation whenever the window is resized. 2. **`resizeText` Function:** This function performs a binary search to find the largest font size that prevents text overflow. It starts with a minimum and maximum font size. It iteratively calculates the midpoint, sets the text's font size, and checks if it overflows. If it does not overflow, it increases the minimum; otherwise, it decreases the maximum. This continues until the optimal size is found. 3. **Rendering:** The component renders a div acting as the container and a span holding the text. The `ref` attributes link these elements to the `useRef` hooks. 4. **Cleanup:** The `useEffect` hook's return function removes the resize event listener when the component unmounts, preventing memory leaks. This component is useful in various scenarios where text needs to adapt to different screen sizes or container widths, such as headers, titles, or responsive layouts. For instance, imagine a hero section with a title that should always be visible and readable without overflowing, regardless of the user's screen size. This component will ensure that the title text always fits perfectly within the available space. Key Concepts and Libraries: - React: Used for building the user interface. - `useRef`: For accessing DOM elements directly. - `useEffect`: For managing side effects like event listeners. - Binary Search: An efficient algorithm for finding the optimal font size.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dynamic Text Resizing to your project and fits it to your theme.

import { ScreenFitText } from "@/components/ui/dynamic-text-resizing";

export default function DemoOne() {
  return <ScreenFitText />;
}