Skip to main content
This page explains how to use the @krono/hooks SDK, a React wrapper around the Core SDK. It manages the lifecycle of connections, handles context propagation, and offers reactive hooks for data consumption. You can find the @krono/hooks SDK source code on Github. To get started, install the required packages.

​
Installation

bun add @krono/hooks
The Krono packages are not yet published to the npm registry. To use them, you’ll need to install and link the packages locally by following the development guide.

​
Setup Providers

To use the hooks, you must wrap your application (or the specific subtree using the hooks) with the context providers. You can use one or both depending on your needs.
App.tsx
import { AssetPairsProvider, OrderbookProvider } from '@krono/hooks';

function App() {
  return (
    // 1. Provide asset metadata (optional, but recommended for symbol lookup)
    <AssetPairsProvider config={{ topN: 50, autoFetch: true }}>

      {/* 2. Provide real-time orderbook connection */}
      <OrderbookProvider config={{ symbol: 'BTC/USD', depth: 100 }}>

        <Dashboard />

      </OrderbookProvider>
    </AssetPairsProvider>
  );
}

​
Consume Data

Now you can use any hook within your Dashboard component.
Dashboard.tsx
import { useOrderbookData, useAssetPairs } from '@krono/hooks';

export function Dashboard() {
  const { findSymbol } = useAssetPairs();
  const { asks, bids } = useOrderbookData();

  const pairInfo = findSymbol('BTC/USD');

  return (
    <div>
      <h1>{pairInfo?.displayLabel || 'Loading...'}</h1>
      <div>Best Ask: {asks[0]?.price}</div>
    </div>
  );
}

​
Next Steps

Orderbook Provider

Configure connection settings and throttling.

AssetPairs Provider

Configure how trading pairs are fetched.

Browse Hooks

See the full list of available hooks.

Playback

Learn how to implement time-traveling features.