MosaicGrip
Provides a custom drag and keyboard handle within a MosaicTile.
Component behavior
MosaicTile includes a header grip. Use MosaicGrip for a custom header or a bare tile. It provides pointer dragging, arrow-key movement, and Shift+arrow resizing.
It renders nothing when the tile cannot move (outside a grid, while the grid is not editable, or on a pinned tile), so it is safe to leave in the tree unconditionally.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Clone the single child as the grip instead of rendering a button. The child is wired with the drag and keyboard handlers and made focusable. |
children | ReactNode | — | With asChild, the child element receives grip behavior. Otherwise, children render inside the default grip button. |
Custom handle element
MosaicGrip renders a button by default. With asChild, it clones one child and adds drag, keyboard, and focus handlers to that element.
Import
import { MosaicGrid, MosaicTile, MosaicGrip } from "@solarius/onset";