Skip to main content

Documentation Index

Fetch the complete documentation index at: https://krono.fabianpiper.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

This hook requires the OrderbookProvider to be present in your component tree to provide the underlying Orderbook instance.

​
Import

import { useOrderbookConnection } from '@krono/hooks'

​
Usage

import { useOrderbookConnection } from '@krono/hooks'

function ConnectionManager() {
  const { status, connect, disconnect } = useOrderbookConnection();

  return (
    <div className="flex items-center gap-4">
      <div className="flex items-center gap-2">
        <StatusIndicator status={status} />
        <span className="capitalize">{status}</span>
      </div>

      {status === 'closed' ? (
        <button onClick={connect}>Connect</button>
      ) : (
        <button onClick={disconnect}>Disconnect</button>
      )}
    </div>
  );
}

​
Parameters

This hook does not accept any parameters. It automatically interfaces with the Orderbook instance provided by the nearest context provider.

​
Return Type

​
State

​
status
'connecting' | 'open' | 'closing' | 'closed'
The current state of the WebSocket connection.

​
Actions

​
connect
() => void
Initiates a connection to the exchange WebSocket. If a connection is already in progress or open, this method usually performs no action.
​
disconnect
() => void
Gracefully closes the active WebSocket connection and stops data processing.

​
Examples

​
Connection

Ensure a connection is active when a component mounts. 
import { useEffect } from 'react';
import { useOrderbookConnection } from '@krono/hooks';

function TradingPanel() {
  const { connect, disconnect, status } = useOrderbookConnection();

  useEffect(() => {
    connect();
    return () => disconnect();
  }, [connect, disconnect]);

  if (status === 'connecting') return <p>Establishing link...</p>;

  return <div>Active Trading UI</div>;
}

​
Reconnection Status UI

Because status is reactive, you can use it to drive complex UI states like loading spinners or error banners. 
function ConnectionBadge() {
  const { status } = useOrderbookConnection();

  const colors = {
    open: 'bg-green-500',
    connecting: 'bg-yellow-500',
    closing: 'bg-orange-500',
    closed: 'bg-red-500',
  };

  return (
    <span className={`px-2 py-1 rounded text-white ${colors[status]}`}>
      {status}
    </span>
  );
}

Orderbook Core

Explore the underlying class logic and connection event emitters.

useOrderbookStatus

The internal hook used to track refined connection states.

useOrderbookConfig

Change symbols or depth before calling the connect method.

Kraken API

Explore the book channel streams level 2 order book docs.