Component

ElasticFrame

It makes direct resizing the experience. The handle changes the frame's real width, so the child wraps and reflows instead of merely changing a decorative scale.

Possible use

It could let a reviewer test whether a handoff label survives an unreasonable column, or let a presenter choose the least readable width for an agenda.

Reasonable alternative

A reasonable local alternative is normal responsive layout with a deliberate max-width. A draggable frame is not a layout system.

01 / Preview

Try it yourself.

Fit me into the brief column

Mechanism

1: Start with a flexible frame around one label.
2: Drag the right handle, or focus it and press the arrow keys.
3: The frame width changes the label's actual wrapping and remains selected.
4: Restore the frame when the layout has been made sufficiently awkward.

02 / Usage

Put it somewhere.

example.tsxTSX

import { ElasticFrame } from "gra-ui";
import "gra-ui/styles.css";

export function NarrowNotice() {
  return <ElasticFrame><span>Make this fit badly</span></ElasticFrame>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content reflowing inside the directly resized frame.