useReach
Utility to use the Reach API inside React applications.
Install
npm install @collecteurs/use-reach --save
or yarn add @collecteurs/use-reach
Peer dependencies
Don't forget to install the peer dependencies:
-
react
>= 17.0.0 -
@reach-sh/stdlib
>= 0.1.0
Basic Usage
import React from 'react'
import { ReachProvider } from '@collecteurs/use-reach'
const loadContract = async () => {
return await import("../MyContract")
}
// Wrap your app with the ReachProvider
export const App = () => (
return (
<ReachProvider
debug
network="TESTNET"
loadContract={loadContract}
config={{ storage: { key: "my-reach-app" } }}>
<MyComponent />
</ReachProvider>
)
)
import React, { useState } from "react";
import { useReach } from "@collecteurs/use-reach";
// Use the useReach hook
export const MyComponent = () => {
const { account, balance } = useReach();
return (
<div>
<p>Network: {network}</p>
<p>Currency: {account.currency}</p>
<p>Provider: {account.provider}</p>
<p>Account: {account.address}</p>
<p>Balance: {balance}</p>
</div>
);
};
API
ReachProvider
The ReachProvider is a wrapper around the Reach API. It provides the context to the useReach hook.
Props
-
debug
(boolean): Enable debug mode. Default:false
-
network
(string): The network to use. Default:TESTNET
-
loadContract
(function): A function that returns the contract. Default:() => {}
-
config
(object): The Reach config. Default:{}
-
children
(node): The children to render.
Config
-
storage
(object): The storage config. Default:{ key: "reach" }
-
algo
(object): The Algorand config. Default:{}
-
logger
(string): The logger config. More info here
useReach
The useReach hook provides the Reach API to the React application.
Returns
-
status
(string): The status of the Reach API. Can beloading
,ready
,error
. -
network
(string): The network name. Can beTESTNET
,MAINNET
. -
lib
(object): The Reach.sh stdlib. -
reach
(object): The Reach API. -
contract
(object): The contract object you loaded. -
getSigningLogs
(function): Get the signing logs. -
connectWallet
(function): Connect the wallet. -
disconnectWallet
(function): Disconnect the wallet. -
getBalance
(function): Get any account address' balance. -
account
(object): The account object. -
fetching
(boolean): Is any api is fetching?