1.2.3 • Published 3 years ago
near-react-hooks v1.2.3
NEAR React Hooks
Use react context and hooks to configure and interact with NEAR.
Setup
You'll need to install the package from npm npm i near-react-hooks near-api-js
.
Then wrap your application with the NearProvider
passing it an environment:
mainnet
testnet
betanet
import React from 'react'
import ReactDOM from 'react-dom'
import { NearProvider, NearEnvironment } from 'near-react-hooks'
import App from './App'
ReactDOM.render(
<NearProvider environment={NearEnvironment.TestNet}>
<App />
</NearProvider>,
document.querySelector('#root')
)
You can more finely tune the NEAR configuration by passing additional props
no the NearProvider
. See the docs for more information.
Once the application is wrapped with the NearProvider
your can access the
NEAR connection, the NEAR wallet, and NEAR contract using react hooks from
any component in the application.
import React, { useEffect } from 'react'
import { useNear, useNearWallet, useNearContract } from 'near-react-hooks';
export default function App() {
const near = useNear()
const wallet = useNearWallet()
const contract = useNearContract('dev-123457824879', {
viewMethods: ['getCount'],
changeMethods: ['decrement', 'increment']
})
useEffect(() => {
if(!wallet.isSignedIn()) wallet.requestSignIn();
}, []);
if(!wallet.isSignedIn()) return null;
return <h1>{wallet.getAccountId()}</h1>;
}