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 written without a compiler. GridCanvas measures itself on mount and binds input; GridItem positions one item and exposes drag and resize handles; GridPreviewOutline shows where the active item will land; createElement is the hyperscript-or-SSR helper they are built with.
import { createElement, GRID_DATA, GridCanvas, GridItem, GridPreviewOutline } from 'gridla/solid'
import type { ElementProps, GridCanvasProps, GridItemProps, GridItemRenderProps, GridPositioning, GridPreviewOutlineProps } from 'gridla/solid'
Functions
createElement
function · solid/element.ts:28
Create a host element without a compiler: solid-js/h hyperscript on the
client (function-valued props and children are reactive) and ssrElement
on the server (accessors are read once). Returns the element itself on the
client and the server's string node otherwise.
export function createElement(tag: string, props: ElementProps, children?: unknown): JSX.Element
Components
GridCanvas
component · solid/components.ts:57
The element items are positioned in. Measures itself on mount, feeds the
size to the provider, and binds pointer and keyboard handling. Renders a
div with position: relative; give it a height (or let it follow the
layout with responsive=\{false\}). Server rendering emits the authored
layout; measurement and input start in onMount.
export function GridCanvas(props: GridCanvasProps): JSX.Element
GridItem
component · solid/components.ts:203
Positions one item inside GridCanvas. Headless: it renders a div with
geometry styles and data attributes and leaves appearance to you. Pass a
render function as children to place your own drag handle or resize chrome.
export function GridItem(props: GridItemProps): JSX.Element
GridPreviewOutline
component · solid/components.ts:291
Renders a box where the active item will land when released. Renders
nothing when no gesture is in progress.
export function GridPreviewOutline(props: GridPreviewOutlineProps): JSX.Element
Constants
GRID_DATA
const · interaction/attributes.ts:6
Data attributes the pointer gesture looks for on pointer down. Adapters emit
them on their elements: item carries the item id, dragHandle marks a
surface that starts a move, resizeHandle plus edge mark a resize handle.
export const GRID_DATA: { readonly item: "data-gridla-item"; readonly dragHandle: "data-gridla-drag-handle"; readonly resizeHandle: "data-gridla-resize-handle"; readonly edge: "data-gridla-edge"; }
Types
ElementProps
type · solid/element.ts:9
Props for createElement: attribute values, or accessors for values that
should update reactively. ref receives the element on the client.
export type ElementProps = Record<string, unknown>
GridCanvasProps
type · solid/components.ts:42
Props for GridCanvas: div attributes (except onKeyDown, which the canvas
owns) plus the pointer gesture options onItemClick, onDeleteKey, enabled.
export type GridCanvasProps = Omit<DivAttributes, 'onKeyDown'> &
GridPointerGestureOptions & {
/** Inline styles merged over the positioning styles the canvas sets. */
style?: JSX.CSSProperties
ref?: Ref<HTMLDivElement>
children?: JSX.Element
}
GridItemProps
type · solid/components.ts:166
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<DivAttributes, '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. */
resizeHandleClass?: string
/**
* Position the element with `transform` (default) or with `left`/`top`.
* Transform keeps layout work off the main thread during gestures.
*/
positioning?: GridPositioning
/** Render the cursor-tracked rect while dragging instead of the solved preview. Default `true`. */
followPointer?: boolean
/** Inline styles merged over the geometry styles the item sets. */
style?: JSX.CSSProperties
ref?: Ref<HTMLDivElement>
/** Content, or a render function that receives the view accessor and handle props. */
children?: JSX.Element | ((props: GridItemRenderProps) => JSX.Element)
}
GridItemRenderProps
type · solid/components.ts:150
Passed to a GridItem render function: the item's GridItemView accessor
plus props for drag and resize handles.
export type GridItemRenderProps = {
/** The item's geometry and flags; read it inside JSX for fine-grained updates. */
view: Accessor<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
}
}
GridPositioning
type · solid/components.ts:22
Element positioning mode: transform (default) or absolute left/top.
export type GridPositioning = 'transform' | 'absolute'
GridPreviewOutlineProps
type · solid/components.ts:281
Props for GridPreviewOutline: div attributes plus the positioning mode
(transform by default).
export type GridPreviewOutlineProps = DivAttributes & {
positioning?: GridPositioning
/** Inline styles merged over the geometry styles the outline sets. */
style?: JSX.CSSProperties
}