> ## 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.

# useOrderbookConnection

> Hook for accessing and modifying the orderbook websocket connection.
Provides the current connection status and methods to connect or disconnect.


<Note>
  This hook requires the `OrderbookProvider` to be present in your component tree to provide the underlying `Orderbook` instance.
</Note>

## Import

```ts theme={null}
import { useOrderbookConnection } from '@krono/hooks'
```

## Usage

```tsx theme={null}
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

<ResponseField name="status" type="'connecting' | 'open' | 'closing' | 'closed'">
  The current state of the WebSocket connection.
</ResponseField>

### Actions

<ResponseField name="connect" type="() => void">
  Initiates a connection to the exchange WebSocket. If a connection is already in progress or open, this method usually performs no action.
</ResponseField>

<ResponseField name="disconnect" type="() => void">
  Gracefully closes the active WebSocket connection and stops data processing.
</ResponseField>

## Examples

### Connection

Ensure a connection is active when a component mounts.

```tsx theme={null}
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.

```tsx theme={null}
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>
  );
}
```

***

## Related

<CardGroup cols={2}>
  <Card title="Orderbook Core" icon="toy-brick" href="/docs/core/api/classes/Orderbook">
    Explore the underlying class logic and connection event emitters.
  </Card>

  <Card title="useOrderbookStatus" icon="signal" href="/docs/hooks/api/useOrderbookStatus">
    The internal hook used to track refined connection states.
  </Card>

  <Card title="useOrderbookConfig" icon="cog" href="/docs/hooks/api/useOrderbookConfig">
    Change symbols or depth before calling the connect method.
  </Card>

  <Card title="Kraken API" icon="link" href="https://docs.kraken.com/api/docs/websocket-v2/book">
    Explore the `book` channel streams level 2 order book docs.
  </Card>
</CardGroup>