> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alphscan.io/llms.txt
> Use this file to discover all available pages before exploring further.

# sdk-react overview

> React hooks and provider for the Alphscan API

**@alphscan/sdk-react** provides React bindings for the [Alphscan API](https://api.alphscan.io): a provider, hooks, and type-safe access to tokens and normalized events. It depends on **@alphscan/sdk** and is designed to work with **@alphscan/sdk-react-ui** for rendering.

## Repository & package

|            | Link                                                                                       |
| ---------- | ------------------------------------------------------------------------------------------ |
| **GitHub** | [github.com/AlphScan/sdk-react](https://github.com/AlphScan/sdk-react)                     |
| **npm**    | [npmjs.com/package/@alphscan/sdk-react](https://www.npmjs.com/package/@alphscan/sdk-react) |

Part of [AlphScan](https://github.com/AlphScan/); npm packages are private until release.

## Features

* **AlphscanProvider** — wrap your app to provide the SDK client to the tree.
* **useClient()** — get the client from context for one-off API calls.
* **useTokens()** — paginated token list with loading/error state.
* **useTxNormalizedEvents()** — fetch normalized events for a transaction by ID.

## Package

```bash theme={null}
npm install @alphscan/sdk-react @alphscan/sdk
# or
pnpm add @alphscan/sdk-react @alphscan/sdk
```

Peer: **react** >= 18.

## Quick example

```tsx theme={null}
import { AlphscanProvider, useTokens } from "@alphscan/sdk-react";

function TokenList() {
  const { data, loading, error, page, setPage } = useTokens({ pageSize: 20 });
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <ul>
      {data?.tokens.map((t) => <li key={t.id}>{t.symbol}</li>)}
    </ul>
  );
}

function App() {
  return (
    <AlphscanProvider apiUrl="https://api.alphscan.io" apiKey="">
      <TokenList />
    </AlphscanProvider>
  );
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Installation" icon="box" href="/sdk-react/installation">
    Install and add the package.
  </Card>

  <Card title="Provider & useClient" icon="layer-group" href="/sdk-react/provider-and-useclient">
    AlphscanProvider and useClient().
  </Card>

  <Card title="useTokens" icon="coins" href="/sdk-react/use-tokens">
    Paginated token list hook.
  </Card>

  <Card title="useTxNormalizedEvents" icon="file-lines" href="/sdk-react/use-tx-normalized-events">
    Transaction normalized events hook.
  </Card>

  <Card title="Hooks reference" icon="code" href="/sdk-react/hooks-reference">
    All hooks and options.
  </Card>
</CardGroup>