WagmiProvider

React Context Provider for Wagmi.

Import

import { WagmiProvider } from 'wagmi'

Usage

app.tsx

import { WagmiProvider } from 'wagmi'
import { config } from './config' 

function App() {
  return (
    <WagmiProvider config={config}> 
      {/** ... */}
    </WagmiProvider>
  )
}

config.ts

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Parameters

import { type WagmiProviderProps } from 'wagmi'

config

Config object to inject with context.

app.tsx

import { WagmiProvider } from 'wagmi'
import { config } from './config' 

function App() {
  return (
    <WagmiProvider
      config={config}
    >
      {/** ... */}
    </WagmiProvider>
  )
}

config.ts

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

initialState

State | undefined

• Initial state to hydrate into the Wagmi Config. Useful for SSR.

app.tsx

import { WagmiProvider } from 'wagmi'
import { config } from './config' 

function App() {
  return (
    <WagmiProvider
      config={config}
      initialState={/* ... /*}
    >
      {/** ... */}
    </WagmiProvider>
  )
}

config.ts

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

reconnectOnMount

boolean | undefined

• Whether or not to reconnect previously connected connectors on mount.
• Defaults to true.

app.tsx

import { WagmiProvider } from 'wagmi'
import { config } from './config' 

function App() {
  return (
    <WagmiProvider
      config={config}
      reconnectOnMount={false}
    >
      {/** ... */}
    </WagmiProvider>
  )
}

config.ts

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Context

import { type WagmiContext } from 'wagmi'