This post discusses the challenge of dynamically scaling text to fit within a container in React, specifically within the context of a Sentry dashboard. It reviews several approaches, including SVGs, CSS transforms, container queries, and JavaScript, before settling on a JavaScript-based solution. The final solution leverages React hooks, ResizeObserver, and a resizing algorithm to dynamically adjust text size efficiently, ensuring excellent performance and user experience. The post also includes code examples and performance insights derived from real-user telemetry.
Table of contents
The Problem SpaceThe Solution SpaceAttempt 1: Driving UI Through React StateThe Resizing AlgorithmAttempt 2: Driving UI Through ResizeObserverPerformanceComponent API DesignThe Final ResultSort: