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

# React SDK

> Truv Bridge SDK for React

**Package:** `@truv/react` | [npm](https://www.npmjs.com/package/@truv/react) | [GitHub](https://github.com/truvhq)

## Install

```bash theme={null}
npm install @truv/react
```

Or with yarn:

```bash theme={null}
yarn add @truv/react
```

***

## Embedded Orders

Use `isOrder={true}` when rendering the Bridge component for multi-connection verification workflows (VOIE, VOE, VOA).

```jsx theme={null}
import { useState } from 'react';
import { TruvBridge } from '@truv/react';

function VerificationFlow({ bridgeToken }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Verify Income</button>
      <TruvBridge
        bridgeToken={bridgeToken}
        isOrder={true}
        isOpened={isOpen}
        onClose={() => setIsOpen(false)}
        onSuccess={() => {
          console.log('User connected all accounts');
        }}
        onEvent={(type, payload, source) => {
          if (type === 'COMPLETED' && source === 'order') {
            navigateToNextStep();
          }
        }}
      />
    </>
  );
}
```

<Warning>
  Wait for the `COMPLETED` event with `source: "order"` before advancing the user in your application. Do **not** use `onSuccess` or `onClose` to advance. The order may still have pending connections.
</Warning>

The `onEvent` callback receives a third `source` parameter. See [Bridge Events](/developers/sdks/bridge-events) for all event types, payloads, and error codes.

***

## Bridge Widget

Use the Bridge component without `isOrder` for single-connection flows like Direct Deposit Switch and Paycheck Linked Lending.

```jsx theme={null}
import { useState } from 'react';
import { TruvBridge } from '@truv/react';

function DepositSwitch({ bridgeToken }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Connect Payroll</button>
      <TruvBridge
        bridgeToken={bridgeToken}
        isOpened={isOpen}
        onClose={() => setIsOpen(false)}
        onSuccess={(publicToken, metaData) => {
          console.log('public_token:', publicToken);
        }}
      />
    </>
  );
}
```