Component

FreeDrift

It turns a bounded surface into a small jurisdiction for free positioning. Drag the child to any coordinate or move it with arrow keys; the exact position remains real state until it is returned to center.

Possible use

It could be used to let a reviewer park a handoff note exactly where their attention wandered, or to let a presenter place an agenda label at a personally selected coordinate on a slide.

Reasonable alternative

A reasonable local alternative is normal flow layout or one deliberate alignment value. Publishing a free-drift surface is difficult to defend because arbitrary coordinates are not a filing system.

01 / Preview

Try it yourself.

Unassigned

Mechanism

1: Start with the content at the exact center of the grid.
2: Drag it to any coordinate, or focus it and use the arrow keys.
3: The content keeps the precise place you gave it instead of improving the layout.
4: Return it to center when free will has been sufficiently demonstrated.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function UnassignedNotice() {
  return <FreeDrift><span>Unassigned</span></FreeDrift>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe single piece of content that may drift anywhere inside the bounded surface.