Component

MagneticDock

It provides a bounded surface with three named pockets. Drag the cargo anywhere and release it; the component calculates the nearest pocket and moves the actual content there, while arrow keys move it between pockets.

Possible use

It could let a reviewer fling a handoff warning toward the nearest category before filing it, or let a presenter park an agenda label in whichever pocket happens to attract it.

Reasonable alternative

A reasonable local alternative is normal flow layout with one explicit category. A magnetic surface creates a coordinate calculation for content that could have used a button or a list.

01 / Preview

Try it yourself.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function ParkedNotice() {
  return <MagneticDock><span>Loose cargo</span></MagneticDock>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe single piece of cargo dragged across the pocket surface.