Hooks
Access the Hive blockchain connection, chain object, and account data through framework-specific hooks.
useHive()
Returns the full Hive context including the chain object, connection status, and endpoint information. This is the primary hook for accessing blockchain connectivity.
| Property | Type | Description |
|---|---|---|
chain | IHiveChainInterface | null | Hive chain instance for API calls |
is_loading | boolean | True while connecting to blockchain |
error | string | null | Error message if connection failed |
is_client | boolean | True when running on client (SSR detection). Not available in Vue package. |
api_endpoint | string | null | Currently active API endpoint URL |
status | ConnectionStatus | Connection state: connecting | connected | reconnecting | disconnected | error |
endpoints | EndpointStatus[] | Health status of all configured endpoints |
refresh_endpoints | () => Promise<void> | Manually trigger endpoint health checks |
import { useHive } from "@hiveio/honeycomb-react";
function StatusBar() {
const {
chain,
is_loading,
error,
is_client,
api_endpoint,
status,
endpoints,
refresh_endpoints,
} = useHive();
if (is_loading) return <p>Connecting to Hive...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div>
<p>Status: {status}</p>
<p>Endpoint: {api_endpoint}</p>
<p>Healthy nodes: {endpoints.filter((ep) => ep.healthy).length}</p>
<button onClick={() => refresh_endpoints()}>
Refresh Endpoints
</button>
</div>
);
}useHiveChain()
Returns the chain object directly. Use this when you only need the chain and want to keep destructuring minimal. The chain object provides access to all Hive blockchain APIs.
Chain API
The chain object is an IHiveChainInterface from @hiveio/wax. Use it to call blockchain APIs like chain.api.database_api.find_accounts() or chain.api.database_api.get_dynamic_global_properties().
import { useHiveChain } from "@hiveio/honeycomb-react";
function AccountLookup({ username }: { username: string }) {
const chain = useHiveChain();
async function fetch_account() {
if (!chain) return;
const result = await chain.api.database_api.find_accounts({
accounts: [username],
});
// result.accounts[0] contains full account data
}
async function fetch_global_props() {
if (!chain) return;
const global_props =
await chain.api.database_api.get_dynamic_global_properties({});
// global_props.head_block_number, global_props.current_supply, etc.
}
return (
<div>
<button onClick={fetch_account}>Fetch Account</button>
<button onClick={fetch_global_props}>Fetch Global Props</button>
</div>
);
}useApiEndpoint()
Returns the currently active API endpoint URL. Returns null when not connected.
import { useApiEndpoint } from "@hiveio/honeycomb-react";
function EndpointDisplay() {
const endpoint = useApiEndpoint();
return <p>Connected to: {endpoint ?? "none"}</p>;
}useHiveStatus()
Returns connection status and endpoint health information.
| Field | Type | Description |
|---|---|---|
url | string | Endpoint URL |
healthy | boolean | Whether the endpoint is responding |
lastCheck | number | null | Timestamp of last health check |
lastError | string | null | Last error message if unhealthy |
import { useHiveStatus } from "@hiveio/honeycomb-react";
function ConnectionMonitor() {
const { status, endpoints } = useHiveStatus();
const healthy = endpoints.filter((ep) => ep.healthy).length;
return (
<div>
<p>Status: {status}</p>
<p>Healthy endpoints: {healthy} / {endpoints.length}</p>
<ul>
{endpoints.map((ep) => (
<li key={ep.url}>
{ep.url} - {ep.healthy ? "OK" : ep.lastError ?? "unhealthy"}
</li>
))}
</ul>
</div>
);
}useHiveAccount(username)
Fetches account data from the Hive blockchain. Handles loading and error states automatically.
| Param | Type | Description |
|---|---|---|
username | string | Hive account username to fetch |
| Property | Type | Description |
|---|---|---|
account | HiveAccount | null | Account data (name, balance, hbd_balance, post_count, etc.) |
is_loading | boolean | True while fetching account data |
error | Error | null | Error if fetch failed |
refetch | () => void | Manually re-fetch account data |
import { useHiveAccount } from "@hiveio/honeycomb-react";
function UserProfile({ username }: { username: string }) {
const { account, is_loading, error, refetch } = useHiveAccount(username);
if (is_loading) return <p>Loading account...</p>;
if (error) return <p>Error: {error.message}</p>;
if (!account) return <p>Account not found</p>;
return (
<div>
<h2>{account.name}</h2>
<p>Balance: {account.balance}</p>
<p>HBD: {account.hbd_balance}</p>
<p>Posts: {account.post_count}</p>
<p>Joined: {account.created}</p>
<button onClick={refetch}>Refresh</button>
</div>
);
}