Hooks
Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.
Subscribe to slices of provider state with minimal rerenders, read the rendered or visible layout, and reach the imperative actions.
import { useElementSize, useGridActions, useGridContext, useGridInteractionState, useGridItem, useGridItemView, useGridLayout, useGridPreview, useGridSelection, useGridSourceLayout, useGridStore, useGridVisibleLayout } from 'gridla/react'
import type { GridContextValue, GridItemView } from 'gridla/react'
Hooks
useElementSize
hook · react/measure.ts:15
Observe an element's content box size with ResizeObserver. The first
measurement happens in a layout effect so the projected layout paints on the
first frame. Returns null until measured. Safe to import during server
rendering.
export function useElementSize(
ref: RefObject<HTMLElement | null>,
enabled = true,
): GridSize | null
useGridActions
hook · react/hooks.ts:54
Imperative layout and selection actions. Stable for the provider's lifetime.
export function useGridActions<TData = unknown>(): GridActions<TData>
useGridContext
hook · react/context.ts:28
Read the nearest GridProvider context. Throws when called outside a provider.
export function useGridContext<TData = unknown>(): GridContextValue<TData>
useGridInteractionState
hook · react/hooks.ts:139
The gesture in progress, or null when idle.
export function useGridInteractionState(): GridInteraction | null
useGridItem
hook · react/hooks.ts:74
One item as it should be painted right now. null when absent.
export function useGridItem<TData = unknown>(itemId: string): GridItem<TData> | null
useGridItemView
hook · react/hooks.ts:105
Everything a rendered item needs, with minimal rerenders.
export function useGridItemView<TData = unknown>(itemId: string): GridItemView
useGridLayout
hook · react/hooks.ts:59
The rendered layout (projected onto the measured canvas size).
export function useGridLayout<TData = unknown>(): GridLayout<TData>
useGridPreview
hook · react/hooks.ts:144
The solver's latest preview for the gesture in progress, or null when idle.
export function useGridPreview<TData = unknown>(): GridPreview<TData> | null
useGridSelection
hook · react/hooks.ts:149
Id of the selected item, or null when nothing is selected.
export function useGridSelection(): string | null
useGridSourceLayout
hook · react/hooks.ts:64
The layout the provider was given, in its own coordinates.
export function useGridSourceLayout<TData = unknown>(): GridLayout<TData>
useGridStore
hook · react/hooks.ts:13
Subscribe to a slice of provider state. Rerenders only when the selected
value changes (by Object.is).
export function useGridStore<TData = unknown, TSlice = GridState<TData>>(
selector: (state: GridState<TData>) => TSlice = (state) => state as unknown as TSlice,
isEqual: (a: TSlice, b: TSlice) => boolean = Object.is,
): TSlice
useGridVisibleLayout
hook · react/hooks.ts:69
The layout that should be painted right now: the preview during a gesture, else the rendered layout.
export function useGridVisibleLayout<TData = unknown>(): GridLayout<TData>
Types
GridContextValue
type · react/context.ts:13
Value provided by GridProvider: its id, the state store, the imperative
actions, the resolved config, the internal gesture API, and the underlying
GridController from gridla/interaction.
export type GridContextValue<TData = unknown> = {
/** Unique id of this provider. Used by transfer scopes. */
id: string
store: Store<GridState<TData>>
actions: GridActions<TData>
config: GridProviderConfig
/** Internal gesture API used by `useGridInteraction`. */
gesture: GridGestureApi<TData>
/** The controller the provider is built on. */
controller: GridController<TData>
}
GridItemView
type · react/hooks.ts:88
Everything needed to paint one item: its current and pre-gesture rectangles
plus its active, selected, shifted, and transferring flags. Returned by
useGridItemView.
export type GridItemView = {
/** Where the item is painted right now (preview-aware). */
rect: GridRect
/** Where the item was before the current gesture. */
baseRect: GridRect
/** Cursor-tracked rect while this item is active; `null` otherwise. */
activeRect: GridRect | null
isActive: boolean
isSelected: boolean
/** True when this item moved in the preview because another item pushed it. */
isShifted: boolean
/** True while the active item is being previewed in another canvas. */
isTransferring: boolean
interaction: GridInteraction | null
}