# Overview

The Fraud Prevention library for React (`@transmitsecurity/riskid-reactjs-ts`) is a wrapper of the Mosaic [Fraud Prevention JavaScript SDK](/sdk-ref/platform/modules/drs_overview). Once integrated, the library automatically collects device and behavioral telemetry and submits it to Mosaic for analysis. When specific user actions occur (such as login or account registration), you can report those events to receive risk-based recommendations via the [Recommendations](/openapi/risk/recommendations.openapi) backend API.

## Capabilities

- Collects device and behavioral data automatically in the background
- Reports user action events (login, registration, transaction, etc.) for risk assessment
- Provides action tokens for correlating client-side and backend events
- React context provider and hook-based API


## Installation

```npm
  npm i @transmitsecurity/riskid-reactjs-ts
```

```yarn
  yarn add @transmitsecurity/riskid-reactjs-ts
```

## Initialization

Import the `TSAccountProtectionProvider` and wrap your application:

```jsx
import { TSAccountProtectionProvider } from '@transmitsecurity/riskid-reactjs-ts';

<TSAccountProtectionProvider
  clientId="CLIENT_ID"
  options={{ serverUrl: 'https://api.transmitsecurity.io/risk-collect/' }}
>
  <App />
</TSAccountProtectionProvider>
```

Configure the server URL based on your region:

| Region | Server URL |
|  --- | --- |
| US | `https://api.transmitsecurity.io/risk-collect/` |
| EU | `https://api.eu.transmitsecurity.io/risk-collect/` |
| Canada | `https://api.ca.transmitsecurity.io/risk-collect/` |
| Australia | `https://api.au.transmitsecurity.io/risk-collect/` |
| Sandbox | `https://api.sbx.transmitsecurity.io/risk-collect/` |
| Custom domain | `https://<your_custom_domain>/risk-collect/` (see [Custom domains](/guides/deployment/custom_domains)) |


## Usage

Use the `useTSAccountProtection` hook to access the library methods:

```js
import { useTSAccountProtection } from '@transmitsecurity/riskid-reactjs-ts';

function InnerComponent() {
  const { triggerActionEvent, setAuthenticatedUser, clearUser } = useTSAccountProtection();

  const handleLogin = async () => {
    const actionResponse = await triggerActionEvent('login');
    // Send actionResponse.actionToken to your backend
  };
}
```

## Next steps

- [React quickstart](/guides/risk/quick_start_react)
- [Recommendations API](/openapi/risk/recommendations.openapi)