Components
Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.
Headless building blocks. GridCanvas measures itself and wires input; GridItem positions one item and exposes drag and resize handles; GridPreviewOutline shows where the active item will land.
import { GridCanvas, GridItem, GridPreviewOutline } from 'gridla/react'
import type { GridCanvasProps, GridItemProps, GridItemRenderProps, GridPreviewOutlineProps } from 'gridla/react'
Components
GridCanvas
component · react/components.tsx:39
The element items are positioned in. Measures itself, feeds the size to the
provider, and wires pointer and keyboard handling. Renders a div with
position: relative; give it a height (or let it follow the layout with
responsive=\{false\}).
export const GridCanvas: React.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "onKeyDown"> & GridPointerGestureOptions & { children?: ReactNode; } & React.RefAttributes<HTMLDivElement>>
GridItem
component · react/components.tsx:134
Positions one item inside GridCanvas. Headless: it renders a div with
geometry styles and data attributes and leaves appearance to you.
export const GridItem: React.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "id" | "children"> & { id: string; draggable?: boolean; resizeEdges?: readonly GridResizeEdge[]; resizeHandleClassName?: string; positioning?: "transform" | "absolute"; followPointer?: boolean; children?: ReactNode | ((view: GridItemRenderProps) => ReactNode); } & React.RefAttributes<HTMLDivElement>>
GridPreviewOutline
component · react/components.tsx:215
Renders a box where the active item will land when released. Renders
nothing when no gesture is in progress.
export function GridPreviewOutline({
positioning = 'transform',
style,
...rest
}: GridPreviewOutlineProps)
Types
GridCanvasProps
type · react/components.tsx:28
Props for GridCanvas: div attributes (except onKeyDown, which the canvas
owns) plus UseGridInteractionOptions.
export type GridCanvasProps = Omit<HTMLAttributes<HTMLDivElement>, 'onKeyDown'> &
UseGridInteractionOptions & {
children?: ReactNode
}
GridItemProps
type · react/components.tsx:108
Props for GridItem. id selects the item; the rest control drag surfaces,
built-in resize handles, and how the element is positioned.
export type GridItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'> & {
/** Id of the item in the layout. */
id: string
/**
* `true` (default): the whole element is a drag surface. `false`: only
* elements with `dragHandleProps` start a move.
*/
draggable?: boolean
/** Edges to render built-in resize handles for. Default: none. */
resizeEdges?: readonly GridResizeEdge[]
/** Class for built-in resize handles. */
resizeHandleClassName?: string
/**
* Position the element with `transform` (default) or with `left`/`top`.
* Transform keeps layout work off the main thread during gestures.
*/
positioning?: 'transform' | 'absolute'
/** Render the cursor-tracked rect while dragging instead of the solved preview. Default `true`. */
followPointer?: boolean
children?: ReactNode | ((view: GridItemRenderProps) => ReactNode)
}
GridItemRenderProps
type · react/components.tsx:94
Passed to a GridItem render function: the item's GridItemView plus props
for drag and resize handles.
export type GridItemRenderProps = GridItemView & {
/** Spread on the element that starts a move. */
dragHandleProps: { [GRID_DATA.dragHandle]: string }
/** Props for a resize handle on the given edge. */
getResizeHandleProps: (edge: GridResizeEdge) => {
[GRID_DATA.resizeHandle]: string
[GRID_DATA.edge]: GridResizeEdge
}
}
GridPreviewOutlineProps
type · react/components.tsx:207
Props for GridPreviewOutline: div attributes plus the positioning mode
(transform by default).
export type GridPreviewOutlineProps = HTMLAttributes<HTMLDivElement> & {
positioning?: 'transform' | 'absolute'
}