# @uidu/react reference URL: https://developers.uidu.org/docs/reference/react > Every export of @uidu/react, generated from the source. React bindings for `@uidu/client`. Guides: [Getting started](https://developers.uidu.org/docs/tools/react/getting-started.md), [Components](https://developers.uidu.org/docs/tools/react/components.md), [Hooks](https://developers.uidu.org/docs/tools/react/hooks.md). ## Components | Export | Description | Demo | | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`BlockRenderer`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/components/BlockRenderer.tsx) | Render exactly one block from a page's `pageBlocks` array, by shortname. | — | | [`DynamicForm`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/components/DynamicForm.tsx) | 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`](https://github.com/uidu-org/api.js/blob/main/apps/demo/src/app/forms/\[id]/FormWithReceipt.tsx) | | [`PageBlocks`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/components/PageBlocks.tsx) | 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`](https://github.com/uidu-org/api.js/blob/main/apps/demo/src/app/page.tsx) | | [`RichText`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/components/RichText.tsx) | Render a Tiptap (ProseMirror) JSON document as React elements. | [`components/themes/careers/show/ClassicShow.tsx`](https://github.com/uidu-org/api.js/blob/main/apps/demo/src/components/themes/careers/show/ClassicShow.tsx) | | [`UiduAppProvider`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/providers/app.tsx) | 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 `` with a session-backed client, so `useUiduClient()` works as anywhere else. | [`app/custom-app/page.tsx`](https://github.com/uidu-org/api.js/blob/main/apps/demo/src/app/custom-app/page.tsx) | | [`UiduProvider`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/providers/index.tsx) | 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 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | [`useFields`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/hooks/useFields.ts)
`useFields(fieldValues: ReadonlyArray \| null \| undefined): Record` | 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`](https://github.com/uidu-org/api.js/blob/main/apps/demo/src/components/blocks/ContactForm.tsx) | | [`useQuery`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/hooks/useQuery.ts)
`useQuery(document: TypedDocumentNode, variables?: TVariables, options?: UseQueryOptions): UseQueryResult` | Generic client-side data-fetching hook: runs `document` against the `UiduClient` from the nearest `` via SWR, so calls are cached and deduplicated by operation name + variables. | — | | [`useUidu`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/providers/index.tsx)
`useUidu(): UiduContextValue` | The nearest `UiduProvider`'s `{ client, endpoint }`; throws outside a provider. | — | | [`useUiduApp`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/providers/app.tsx)
`useUiduApp(): UiduAppState` | The custom app's bridge state: `connecting`, `ready` or `error`. | [`app/custom-app/page.tsx`](https://github.com/uidu-org/api.js/blob/main/apps/demo/src/app/custom-app/page.tsx) | | [`useUiduClient`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/providers/index.tsx)
`useUiduClient(): UiduClient` | The `UiduClient` from the nearest `UiduProvider`; throws outside a provider. | — | ## Functions | Export | Description | Demo | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | [`formatSalaryRange`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/utils/jobs.ts)
`formatSalaryRange(job: Pick, 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. | — | | [`getBlockShortname`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/components/PageBlocks.tsx)
`getBlockShortname(block: PageBlock): string \| null` | The shortname a page block is rendered by (its template block's, else its own), or null. | — | | [`toText`](https://github.com/uidu-org/api.js/blob/main/packages/react/src/utils/text.ts)
`toText(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`](https://github.com/uidu-org/api.js/blob/main/apps/demo/src/components/blocks/ContactForm.tsx) | ## Types `BlockComponent`, `BlockRendererProps`, `DynamicFormProps`, `DynamicFormResult`, `DynamicFormValues`, `FormatSalaryOptions`, `PageBlocksProps`, `RichTextNode`, `RichTextProps`, `UiduAppProviderProps`, `UiduAppState`, `UseQueryOptions`, `UseQueryResult`