## Installation

Use this lightweight React hook package to integrate Relay into your custom interface. Start by installing the required packages:

```bash
yarn add react react-dom viem @tanstack/react-query @relayprotocol/relay-kit-hooks
```

```bash
npm install --save react react-dom viem @tanstack/react-query @relayprotocol/relay-kit-hooks
```

```bash
pnpm add react react-dom viem @tanstack/react-query @relayprotocol/relay-kit-hooks
```

```bash
bun add react react-dom viem @tanstack/react-query @relayprotocol/relay-kit-hooks
```

If using TypeScript, ensure that you’re on v5+. Refer to the package.json for the latest version requirements for the peer dependencies.

## Tanstack Query Setup

The hooks require [TanStack Query](https://tanstack.com/query/latest) to be installed and configured. Refer to the [Tanstack installation instructions](https://tanstack.com/query/latest/docs/framework/react/installation). Once Tanstack is configured in your React application, that’s all you need to get started.

## Hooks

Each hook is configured separately to allow for as much flexibility as possible. All hooks come with a query function that can be used outside of a React context to fetch the data (useful when using SSR or in a context that doesn’t use React).

- [useQuote](https://docs.relay.link/references/relay-kit/hooks/useQuote)
- [useRelayChains](https://docs.relay.link/references/relay-kit/hooks/useRelayChains)
- [useRequests](https://docs.relay.link/references/relay-kit/hooks/useRequests)
- [useTokenList](https://docs.relay.link/references/relay-kit/hooks/useTokenList)
- [useTokenPrice](https://docs.relay.link/references/relay-kit/hooks/useTokenPrice)
- [useExecutionStatus](https://docs.relay.link/references/relay-kit/hooks/useExecutionStatus)