npm install --save edge-react-hooks
yarn add edge-react-hooks
These hooks enable you to use a mutable Edge Object (EdgeContext | EdgeAccount | EdgeCurrencyWallet
) in a function component. They subscribe to the property of the supplied Edge Object and cause the consuming component to re-render if the property of the Edge Object changes.
An async property is data that is available through an async function, but which is automatically loaded.
const { loginMessages, pending, error } = useLoginMessages(context)
You can think of async method hooks like useRenameWallet()
as mini redux stores with redux-thunk built in.
To use them, you can destructure the return value:
const { renameWallet, pending, error } = useRenameWallet(account, walletName)
name | type |
---|---|
{named method} |
() => void |
pending | boolean |
error | `Error |
{named data} |
`typeof data |
Calling the {named method}
is like dispatching a thunk to the redux store, and results in multiple changes of the state with accompanying re-renders of the consuming component.
// component will re-render automatically only if `wallet.name`, `pending`, or `error` changes
const WalletInfo = ({ wallet }: { wallet: EdgeCurrencyWallet }) => {
useWatch(wallet, 'name') // re-render when `wallet.name` changes
const { enabledTokens, pending, error } = useEnabledTokens(wallet) // async property
const { renameWallet, pending, error } = useRenameWallet(wallet) // async method
return (
<div>
<div>{wallet.name}</div>
<button disable={pending} onClick={() => renameWallet( 'my other wallet')}>
{pending ? '...' ? "Rename"}
</button>
<div>
{enabledTokens.map(token => (
<div>{token}</div>
))}
</div>
</div>
)
}