npm install --save edge-react-hooks

Usage no npm install needed!

<script type="module">
  import edgeReactHooks from 'https://cdn.skypack.dev/edge-react-hooks';


Edge React Hooks

Companion hooks for edge-core-js



npm install --save edge-react-hooks


yarn add edge-react-hooks

Properties (useWatch)

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.

Async Properties (e.g. 'useLocalUsers')

An async property is data that is available through an async function, but which is automatically loaded.

const { loginMessages, pending, error } = useLoginMessages(context)

Async Methods

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 | undefined
{named data} typeof data | undefined

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 (
      <button disable={pending} onClick={() => renameWallet(  'my other wallet')}>
        {pending ? '...' ? "Rename"}

      {enabledTokens.map(token => (