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

# Getting started

> Start building with Krono Hooks for React.

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

<CodeGroup>
  ```bun bun theme={null}
  bun add @krono/hooks
  ```

  ```npm npm theme={null}
  npm install @krono/hooks
  ```

  ```yarn yarn theme={null}
  yarn add @krono/hooks
  ```

  ```pnpm pnpm theme={null}
  pnpm add @krono/hooks
  ```
</CodeGroup>

<Warning>
  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
  <a href="../development/getting-started">development guide</a>.
</Warning>

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

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

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

<CardGroup cols={2}>
  <Card title="Orderbook Provider" icon="plug" href="/docs/hooks/providers/orderbook-provider">
    Configure connection settings and throttling.
  </Card>

  <Card title="AssetPairs Provider" icon="list" href="/docs/hooks/providers/asset-pairs-provider">
    Configure how trading pairs are fetched.
  </Card>

  <Card title="Browse Hooks" icon="code" href="/docs/hooks/api">
    See the full list of available hooks.
  </Card>

  <Card title="Playback" icon="film" href="/docs/hooks/api/useOrderbookPlayback">
    Learn how to implement time-traveling features.
  </Card>
</CardGroup>