# React Start Guide

# React Integration Guide

This guide will walk you through the process of integrating the Wallet SDK into your React application. By the end, you'll have a basic setup that allows users to connect their Frak Wallet and perform simple interactions.

## Prerequisites

Before you begin, ensure that:

1. You have a React project set up.
2. You have a merchant account on the [Frak business dashboard](https://business.frak.id/) with your storefront's domain registered. The main domain is registered automatically at sign-up; for subdomains, add them under **Allowed Domains** on the dashboard.

If you haven't completed these steps, please refer to the [Getting Started](/guides) guide.

## Step 1: Install Dependencies

First, install the required packages:

```bash
npm install @frak-labs/react-sdk @tanstack/react-query
```

```bash
yarn add @frak-labs/react-sdk @tanstack/react-query
```

```bash
pnpm add @frak-labs/react-sdk @tanstack/react-query
```

```bash
bun add @frak-labs/react-sdk @tanstack/react-query
```

## Step 2: Set Up the Frak Client

Create a new component to set up the Frak client and iframe:

```tsx twoslash title="FrakProvider.tsx"
// @noErrors
// [!include ~/snippets/integration/FrakProvider.tsx]
```

Wrap your main App component with this provider:

```tsx twoslash title="App.tsx"
// @noErrors
import { FrakProvider } from './FrakProvider';

function App() {
  return (
    <FrakProvider>
      {/* Your app content */}
    </FrakProvider>
  );
}

export default App;
```

For more detailed configuration options, see [FrakWalletSdkConfig](/developers/references/core-sdk/index/type-aliases/frakwalletsdkconfig/).

## Step 3: Check Wallet Status

Create a component to check and display the wallet status using the [useWalletStatus](/developers/references/react-sdk/functions/usewalletstatus/) hook:

```tsx twoslash title="WalletStatus.tsx"
// @noErrors
// [!include ~/snippets/integration/react-app.tsx:wallet-status]
```

## Step 4: Implement Login Modal

Create a component for the login modal, using the [useDisplayModal](/developers/references/react-sdk/functions/usedisplaymodal/) hook:

```tsx twoslash title="LoginButton.tsx"
// @noErrors
// [!include ~/snippets/integration/react-app.tsx:login-button]
```

## Step 5: Put It All Together

Update your main App component to include the wallet status and login button:

```tsx twoslash
// @noErrors
// [!include ~/snippets/integration/react-app.tsx:app]
```

```tsx twoslash
// @noErrors
// [!include ~/snippets/integration/react-app.tsx]
```

```tsx twoslash
// @noErrors
// [!include ~/snippets/integration/FrakProvider.tsx]
```

## Next Steps

With this setup, you have a basic React application integrated with the Wallet SDK. Users can now connect their Frak Wallet and log in. From here, you can start implementing more advanced features such as:

- Sending interactions
- Implementing referral systems
- Creating reward campaigns

Refer to the specific action and hook documentation for details on implementing these features.