edge-react-hooks
v4.2.1Edge React Hooks
Companion hooks for edge-core-js
Installation
npm
npm install --save edge-react-hooks
yarn
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 |
{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.
Example
// 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>
)
}
Metadata
- MIT
- Whatever
- Kevin Sullivan
- released 6/29/2020