WagmiProvider
React Context Provider for Wagmi.
Import
ts
import { WagmiProvider } from 'wagmi'import { WagmiProvider } from 'wagmi'Usage
tsx
import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
return (
<WagmiProvider config={config}>
{/** ... */}
</WagmiProvider>
)
}import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
return (
<WagmiProvider config={config}>
{/** ... */}
</WagmiProvider>
)
}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(),
},
})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
ts
import { type WagmiProviderProps } from 'wagmi'import { type WagmiProviderProps } from 'wagmi'config
Config object to inject with context.
tsx
import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
return (
<WagmiProvider
config={config}
>
{/** ... */}
</WagmiProvider>
)
}import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
return (
<WagmiProvider
config={config}
>
{/** ... */}
</WagmiProvider>
)
}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(),
},
})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.
tsx
import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
return (
<WagmiProvider
config={config}
initialState={/* ... /*}
>
{/** ... */}
</WagmiProvider>
)
}import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
return (
<WagmiProvider
config={config}
initialState={/* ... /*}
>
{/** ... */}
</WagmiProvider>
)
}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(),
},
})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.
tsx
import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
return (
<WagmiProvider
config={config}
reconnectOnMount={false}
>
{/** ... */}
</WagmiProvider>
)
}import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
return (
<WagmiProvider
config={config}
reconnectOnMount={false}
>
{/** ... */}
</WagmiProvider>
)
}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(),
},
})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
ts
import { type WagmiContext } from 'wagmi'import { type WagmiContext } from 'wagmi'