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

# React

You can add support for Sophon Account in your React application by using the `@sophon-labs/account-react` package.

## Installation

<CodeGroup>
  ```sh npm theme={null}
  # Sophon Library
  npm install @sophon-labs/account-react
  ```

  ```sh yarn theme={null}
  # Sophon Library
  yarn add @sophon-labs/account-react
  ```

  ```sh pnpm theme={null}
  # Sophon Library
  pnpm add @sophon-labs/account-react
  ```
</CodeGroup>

## Usage

Before anything, you need to wrap your application with `SophonContextProvider`, that will store context information about the account and walletClient connection.

```ts theme={null}
'use client';

import { DataScopes } from '@sophon-labs/account-core';
import {
  SophonContextProvider,
  SophonWagmiConnector,
} from '@sophon-labs/account-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { type ReactNode, useState } from 'react';
import { type State, WagmiProvider } from 'wagmi';
import { getWagmiConfig } from '../lib/wagmi';

export default function Web3ModalProvider({
  children,
  initialState,
}: {
  children: ReactNode;
  initialState?: State;
}) {
  const [config] = useState(() => getWagmiConfig());
  const [queryClient] = useState(() => new QueryClient());
  return (
    <SophonContextProvider
      network="testnet"
      partnerId="123b216c-678e-4611-af9a-2d5b7b061258"
      dataScopes={[DataScopes.email]}
    >
      <WagmiProvider config={config} initialState={initialState}>
        <QueryClientProvider client={queryClient}>
          <SophonWagmiConnector>{children}</SophonWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </SophonContextProvider>
  );
}
```

With that ready, you can now use our hooks to interact with Sophon.

```ts theme={null}
import { useSophonAccount } from "@sophon-labs/account-react";

export default function YourComponent() {
  const { connect, account, disconnect } = useSophonAccount();
  // ...
}
```

And you can use any wagmi hook to interact with the wallet as well.

<Card title="React Example" icon="github" href="https://github.com/sophon-org/sophon-account-sso/tree/main/examples/web/react" arrow="true" cta="Read more">
  You can check an example of implementing React Native with Sophon Account.
</Card>