Component

OrbitStow

It turns a child into cargo on a small storage orbit. Drag around the ring or use the arrow keys to park the content at one of eight compass docks; the cargo remains in that real position until it is returned to dock one.

Possible use

It could be used to park a handoff warning at the side of a card according to where a reviewer drags it, or to let a presenter orbit an agenda label toward the corner of the slide that feels most ceremonially relevant.

Reasonable alternative

A reasonable local alternative is one CSS position or an ordinary alignment control. Publishing orbital storage is difficult to defend because content does not become better filed by circling it around a ring.

01 / Preview

Try it yourself.

Review me

Mechanism

1: Start with the notice parked at dock one.
2: Drag the cargo around the ring, or focus the ring and use the arrow keys.
3: The notice moves to an actual orbital dock and stays there.
4: Return to dock one when the orbit has done enough filing.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function OrbitalNotice() {
  return <OrbitStow><span>Review me</span></OrbitStow>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe single piece of content parked around the orbital ring.