> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK

> Migrate the FlowX React renderer SDK from 5.1.x LTS to 5.9.x.

## React SDK migration guide

5.9 bumps the React renderer to React 19, Node 24, and npm 11. Custom validators move to a Valtio-based layer, and the SDK exposes new top-level props (`cache`, interceptors, `onProcessEnded`, `buildId`).

### Framework upgrade: React 18 → 19

The 5.9 React SDK requires React 19 in the host app. Follow the official [React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).

| Requirement | 5.1     | 5.9          |
| ----------- | ------- | ------------ |
| React       | \~18    | **19**       |
| Node        | 18.16.9 | **≥ 24.0.0** |
| npm         | v10.8.0 | **≥ 11.0.0** |

<Warning>
  The host app **must** be on React 19 before installing the 5.9 SDK. Mixed-React trees fail at runtime with hook-mismatch errors.
</Warning>

### FlowX SDK changes

#### Organization ID property

We've added a new `organizationId` mandatory prop to the `FlxProcessRenderer` component. See SDK documentation for more details.

```typescript theme={"system"}
<FlxProcessRenderer
  ...
  organizationId={'10000001-0001-0001-8001-100000000001'}
/>
```

#### Custom validators no longer use React Hook Form

In 5.1, validators were piped through React Hook Form. In 5.9 they are processed through a custom Valtio-based validation layer.

The validator function signature is unchanged:

```typescript theme={"system"}
const myValidator = (...params: string[]) => (v: any) => boolean | Promise<boolean>
```

If you relied on React Hook Form internals (e.g. `register`, `setError`, `getValues`) inside a custom validator, refactor to use only the value argument `v`.

### Theming and components

`@flowx/react-sdk` now depends directly on `date-fns@4`. Host apps that pin `date-fns` must move to the 4.x line.

`@flowx/react-ui-toolkit` bumps `air-datepicker` to `3.6.0` and adds `marked` and `sanitize-html` to support markdown rendering in rich-text components.

## Related resources

<CardGroup cols={2}>
  <Card title="React SDK reference" icon="react" href="/5.9/sdks/react-renderer">
    React renderer SDK documentation
  </Card>

  <Card title="Migration overview" icon="arrow-up-right-from-square" href="./overview">
    Full 5.1.x LTS → 5.9.x upgrade guide
  </Card>
</CardGroup>