> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usemina.co/llms.txt
> Use this file to discover all available pages before exploring further.
# React Installation
> Set up the Mina SDK for React applications
# React Installation
The Mina SDK provides first-class React support with hooks and a context provider for seamless integration into your React applications.
## Installation
Install the SDK along with its peer dependencies.
```bash npm theme={null}
npm install @siphoyawe/mina-sdk viem react react-dom
```
```bash yarn theme={null}
yarn add @siphoyawe/mina-sdk viem react react-dom
```
```bash pnpm theme={null}
pnpm add @siphoyawe/mina-sdk viem react react-dom
```
```bash bun theme={null}
bun add @siphoyawe/mina-sdk viem react react-dom
```
## Requirements
| Dependency | Version | Purpose |
| ----------- | ------- | --------------------- |
| `react` | ^18.0.0 | React library |
| `react-dom` | ^18.0.0 | React DOM renderer |
| `viem` | ^2.0.0 | Ethereum interactions |
## Import Path
React-specific exports are available from a dedicated subpath:
```typescript theme={null}
// React hooks and provider
import {
MinaProvider,
useMina,
useQuote,
useTokenBalance,
useTransactionStatus
} from '@siphoyawe/mina-sdk/react';
// Core SDK (also available)
import { Mina, getChains, getTokens } from '@siphoyawe/mina-sdk';
```
The `/react` subpath includes client-side only code. Always import React hooks from `@siphoyawe/mina-sdk/react`, not from the main entry point.
## Framework Setup
The SDK requires client-side rendering. Mark your provider component with `'use client'`:
```typescript app/providers.tsx theme={null}
'use client';
import { MinaProvider } from '@siphoyawe/mina-sdk/react';
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Then use in your root layout:
```typescript app/layout.tsx theme={null}
import { Providers } from './providers';
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
{children}
);
}
```
The `'use client'` directive is required for any component using Mina hooks. Without it, Next.js will attempt server-side rendering which will fail.
Wrap your app in `_app.tsx`:
```typescript pages/_app.tsx theme={null}
import type { AppProps } from 'next/app';
import { MinaProvider } from '@siphoyawe/mina-sdk/react';
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
```
Wrap your app at the entry point:
```typescript src/main.tsx theme={null}
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MinaProvider } from '@siphoyawe/mina-sdk/react';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
);
```
## TypeScript Configuration
Ensure your `tsconfig.json` supports the SDK:
```json tsconfig.json theme={null}
{
"compilerOptions": {
"moduleResolution": "bundler",
"target": "ES2020",
"lib": ["ES2020", "DOM"],
"jsx": "react-jsx"
}
}
```
## Verifying Setup
Create a simple component to verify the SDK is working:
```typescript components/SDKStatus.tsx theme={null}
'use client';
import { useMina } from '@siphoyawe/mina-sdk/react';
export function SDKStatus() {
const { mina, isReady, error } = useMina();
if (error) {
return SDK Error: {error.message}
;
}
if (!isReady) {
return Initializing SDK...
;
}
return SDK Ready
;
}
```
## Available Exports
The `/react` subpath exports:
| Export | Type | Description |
| ---------------------- | --------- | -------------------------------------- |
| `MinaProvider` | Component | Context provider for SDK instance |
| `useMina` | Hook | Access SDK instance and status |
| `useQuote` | Hook | Fetch bridge quotes with debouncing |
| `useTokenBalance` | Hook | Track token balances with auto-refresh |
| `useTransactionStatus` | Hook | Poll transaction status |
Additionally, commonly used types are re-exported for convenience:
```typescript theme={null}
import type {
MinaConfig,
Chain,
Token,
Quote,
QuoteParams,
Balance,
ExecutionResult,
TransactionStatus,
} from '@siphoyawe/mina-sdk/react';
```
## Next Steps
Configure and set up the provider
Access the SDK instance