Skip to content

Commit d5442f2

Browse files
committed
update readme
1 parent 08a6db0 commit d5442f2

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

packages/react/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,47 @@ function App() {
6565
}
6666
```
6767

68+
### Using the `Web3OnboardProvider`
69+
You can use the context provider `Web3OnboardProvider` to better manage global state. Simply wrap the provider around your `App` and
70+
the initialized web3Onboard instance will be available in all children components. See example below.
71+
72+
```ts
73+
import { Web3OnboardProvider, init } from '@web3-onboard/react'
74+
import injectedModule from '@web3-onboard/injected-wallets'
75+
76+
const INFURA_KEY = ''
77+
78+
const ethereumRopsten = {
79+
id: '0x3',
80+
token: 'rETH',
81+
label: 'Ethereum Ropsten',
82+
rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}`
83+
}
84+
85+
const chains = [ethereumRopsten]
86+
const wallets = [injectedModule()]
87+
88+
const web3Onboard = init({
89+
wallets,
90+
chains,
91+
appMetadata: {
92+
name: "Web3-Onboard Demo",
93+
icon: '<svg>App Icon</svg>',
94+
description: "A demo of Web3-Onboard."
95+
}
96+
})
97+
98+
function MyApp({ Component, pageProps }) {
99+
return (
100+
<Web3OnboardProvider web3Onboard={web3Onboard}>
101+
<Component {...pageProps} />
102+
</Web3OnboardProvider>
103+
)
104+
}
105+
106+
export default MyApp
107+
```
108+
68109
## `init`
69110

70111
The `init` function must be called before any hooks can be used. The `init` function just initializes `web3-onboard` and makes it available for all hooks to use. For reference check out the [initialization docs for `@web3-onboard/core`](../core/README.md#initialization)

0 commit comments

Comments
 (0)