Skip to Content
UI DocsVariaAutotext

Base Usage

AutoText automatically scales its font so a single-line string always fits the element’s bounds.

import { h } from "preact"
import { AutoText } from "@/comps/varia/autotext"
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/comps/echo/resizable"
 
export function AutoTextDemo() {
    return <ResizablePanelGroup
        direction="horizontal"
        class="w-[340px] rounded-lg border border-gray-400 bg-white"
    >
        <ResizablePanel class="flex justify-center items-center" defaultSize={75}>
            <div class="flex w-full h-full items-center justify-center">
                <AutoText text="The cake is a lie" />
            </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={25}>
            <div class="flex h-[200px] items-center justify-center">
                <div class="font-bold"></div>
            </div>
        </ResizablePanel>
    </ResizablePanelGroup>
}

Centering, Colors & Tailwind Styling

AutoText passes all extra props through to the underlying <div> so you can align or decorate just like any other element.

import { h } from "preact"
import { AutoText } from "@/comps/varia/autotext"
 
export const AutoTextStyleDemo = () => (
    <AutoText
        text="42"
        class="bg-indigo-600/20 text-indigo-300 text-center items-center justify-center"
    />
)

Behaviour Notes

  • Works best for single-line, no-wrap text.
  • Resizes on both geometry changes and prop text updates.
  • Font size never drops below 1px.
SegmentedLerpnum