# React SDK

## Installation <a href="#installation" id="installation"></a>

To install the React SDK, use your preferred package manager from the command line. For example, if you use bun, execute the following command:

{% code overflow="wrap" %}

```bash
bun add @inverter-network/react wagmi@^2.14.11 viem@^2.24.2 @tanstack/react-query@^5.59.0
```

{% endcode %}

***

## Initializing the React SDK <a href="#initializing-the-sdk" id="initializing-the-sdk"></a>

Since our React SDK uses `@tanstack/react-query`, `wagmi` and `viem` we need these instances to be present at the parent level.

`@inverter-network/react` SDK has the export paths `@inverter-network/react` and `@inverter-network/react/client` Client components and hooks are exported from `*/client` this is done to ensure `Next.js` users have a separate import path for server components .

{% code overflow="wrap" %}

```typescript
'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { getERPCTransport } from '@inverter-network/sdk'
import { WagmiProvider, createConfig, http } from 'wagmi'
import { sepolia } from 'viem/chains'

const chains = [sepolia]

const queryClient = new QueryClient()

const wagmiConfig = createConfig({
    chains,
    multiInjectedProviderDiscovery: false,
    transports: {
        [sepolia.id]: getERPCTransport(sepolia.id),
    },
    ssr: true, // If the user is using a SSR supporting framework
    cacheTime: 5000, // 5 seconds
  })

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig} reconnectOnMount>
        {children}
      </WagmiProvider>
    </QueryClientProvider>
  )
}
```

{% endcode %}