Reference
@uidu/react reference
Every export of @uidu/react, generated from the source.
React bindings for @uidu/client. Guides: Getting started, Components, Hooks.
Components
| Export | Description | Demo |
|---|---|---|
BlockRenderer | Render exactly one block from a page's pageBlocks array, by shortname. | — |
DynamicForm | Render a uidu form (from getForm, call.form, …) as HTML inputs and hand the parsed values to your action, typically a createFormResponse Server Action. | app/forms/[id]/FormWithReceipt.tsx |
PageBlocks | Render a page's blocks in order, each with the component keyed by its shortname in components; blocks with no match render fallback, or nothing. | app/page.tsx |
RichText | Render a Tiptap (ProseMirror) JSON document as React elements. | components/themes/careers/show/ClassicShow.tsx |
UiduAppProvider | Connects a custom app to the uidu page framing it (@uidu/app-bridge) and hands the tree its state through useUiduApp. Once connected, the children also sit inside a <UiduProvider> with a session-backed client, so useUiduClient() works as anywhere else. | app/custom-app/page.tsx |
UiduProvider | Provide a UiduClient to the tree, either a client you built or one made from workspace/publicToken/endpoint, plus an SWR fetcher backed by it. | — |
Hooks
| Export | Description | Demo |
|---|---|---|
useFieldsuseFields(fieldValues: ReadonlyArray<FieldValue> | null | undefined): Record<string, unknown> | Normalize a fieldValues array into a { shortname: value } map so blocks can access their fields by name without walking the GraphQL shape. | components/blocks/ContactForm.tsx |
useQueryuseQuery(document: TypedDocumentNode<TResult, TVariables>, variables?: TVariables, options?: UseQueryOptions<TResult>): UseQueryResult<TResult> | Generic client-side data-fetching hook: runs document against the UiduClient from the nearest <UiduProvider> via SWR, so calls are cached and deduplicated by operation name + variables. | — |
useUiduuseUidu(): UiduContextValue | The nearest UiduProvider's { client, endpoint }; throws outside a provider. | — |
useUiduAppuseUiduApp(): UiduAppState | The custom app's bridge state: connecting, ready or error. | app/custom-app/page.tsx |
useUiduClientuseUiduClient(): UiduClient | The UiduClient from the nearest UiduProvider; throws outside a provider. | — |
Functions
| Export | Description | Demo |
|---|---|---|
formatSalaryRangeformatSalaryRange(job: Pick<Job, 'salaryMin' | 'salaryMax'>, options: FormatSalaryOptions = {}): string | null | Format a job's salary range (salaryMin/salaryMax) into a display string. Returns null when the job advertises no salary, so callers can hide the field. Handles open-ended ranges ("From …", "Up to …") and a single figure. | — |
getBlockShortnamegetBlockShortname(block: PageBlock): string | null | The shortname a page block is rendered by (its template block's, else its own), or null. | — |
toTexttoText(value: unknown): string | Flatten any uidu field-content value into a plain string. Handles raw strings, numbers, Slate-style rich text nodes ({ type, children }, { text }), arrays of nodes, and wrapper objects with a value field. | components/blocks/ContactForm.tsx |
Types
BlockComponent, BlockRendererProps, DynamicFormProps, DynamicFormResult, DynamicFormValues, FormatSalaryOptions, PageBlocksProps, RichTextNode, RichTextProps, UiduAppProviderProps, UiduAppState, UseQueryOptions, UseQueryResult