Version: Current – v2.x

# On this page

If you're using [React](https://react.dev/), you can use our [React hooks library](https://www.npmjs.com/package/@parallelmarkets/react) to make integration quick and easy.

## Three Minute Setup

If you're looking for the fastest way to test things out, check out our [Example React App](https://github.com/parallel-markets/parallel-js/tree/master/examples/react-webpack).

## Setup

Install the Parallel React library and the vanilla loader from the [npm public registry](https://www.npmjs.com/package/@parallelmarkets/react).

```sh
npm install --save @parallelmarkets/react @parallelmarkets/vanilla
```

## ParallelProvider

The `ParallelProvider` allows you to use our hooks and access the Parallel object in any nested component. Render a `ParallelProvider` at the root of your React app so that it is available everywhere you need it.

To use the `ParallelProvider`, call [loadParallel](https://www.npmjs.com/package/@parallelmarkets/vanilla) from `@parallelmarkets/vanilla` with your [configuration options](https://developer.parallelmarkets.com/docs/javascript/configuration). The `loadParallel` function asynchronously loads the parallel.js script and initializes a Parallel object. Pass the returned Promise to `ParallelProvider`.

```jsx
import { loadParallel } from '@parallelmarkets/vanilla'
import { ParallelProvider } from '@parallelmarkets/react'

const parallel = loadParallel({ client_id: '123', environment: 'demo', flow_type: 'overlay' })

const App = () => (
  <ParallelProvider parallel={parallel}>
    <YourRootComponent />
  </ParallelProvider>
)

const app = document.getElementById('main')
const root = createRoot(app)
root.render(<App />)
```

**info**
To best leverage Parallel's fraud detection, include the call to `loadParallel` across your app/site. This allows Parallel to detect suspicious behavior that may be indicative of fraud as users interact with your website.

## Initiating a Parallel Flow

This is a more complete example, showing use of the [`useParallel`](https://www.npmjs.com/package/@parallelmarkets/react#usage) hook in a child component. Additionally, this example shows use of the `PassportButton` component, that, when clicked, initiates a Parallel flow. You can simply call `parallel.login()` as an alternative to showing the `PassportButton` component.

```jsx
import React
import { loadParallel } from '@parallelmarkets/vanilla'
import { ParallelProvider, useParallel, PassportButton } from '@parallelmarkets/react'

const AccreditationArea = () => {
  const { parallel, loginStatus } = useParallel()
  if (!loginStatus) return null
  return (
    <>
      <h1>Status: {loginStatus.status}</h1>
      {loginStatus.status !== 'connected' ? (
        <PassportButton />
      ) : (
        <button onClick={parallel.logout}>Log Out</button>
      )}
    </>
  )
}

const parallel = loadParallel({ client_id: '123', environment: 'demo', flow_type: 'overlay' })

const App = () => (
  <ParallelProvider parallel={parallel}>
    <AccreditationArea />
  </ParallelProvider>
)

const app = document.getElementById('main')
const root = createRoot(app)
root.render(<App />)
```

## Getting the Parallel ID

The result of any successful authentication event will include an [`authResponse`](https://developer.parallelmarkets.com/docs/javascript/events#event-callback-arguments) field that indicates the status of the handoff. Once the status is `connected`, you can call the [`getProfile()`](https://developer.parallelmarkets.com/docs/javascript/sdk) function to get the Parallel ID for the user or business that completed the flow (along with other profile information). That ID should be saved to your backend along with your internal ID for the current session so your server can make ongoing calls to get/update information for the user/business.

Here's an implementation that demonstrates persisting the Parallel ID to an example backend endpoint.

```jsx
const ParallelIDSaver = () => {
  const { loginStatus, getProfile } = useParallel()

useEffect(() => {
    if (loginStatus?.status !== 'connected') return
    getProfile().then((response) => {
      fetch('/save-parallel-id', {
        body: JSON.stringify({
          parallelId: response['profile']['id'],
          internalId: getInvestorId(),
        }),
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      })
    })
  }, [loginStatus, getProfile])

if (loginStatus?.status !== 'connected') return null
  return <p>Thanks for providing your information!</p>
}
```