> ## Documentation Index
> Fetch the complete documentation index at: https://docs.snackbase.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# React Setup
> Set up SnackBase SDK with React
The SnackBase SDK provides React hooks and context providers for seamless integration with React applications.
## Installation
Install the SDK and React peer dependency:
```bash npm theme={null}
npm install @snackbase/sdk react
```
```bash yarn theme={null}
yarn add @snackbase/sdk react
```
```bash pnpm theme={null}
pnpm add @snackbase/sdk react
```
React 18 or higher is required for the React integration.
## Setup
### 1. Wrap with Provider
Wrap your application with `SnackBaseProvider`:
```tsx theme={null}
import { SnackBaseProvider } from "@snackbase/sdk/react";
function App() {
return (
);
}
```
### 2. Use Hooks
Use the provided hooks in your components:
```tsx theme={null}
import { useAuth, useRecord } from "@snackbase/sdk/react";
function Profile() {
const { user, login, logout } = useAuth();
const { data: profile, loading } = useRecord("profiles", user?.id);
if (!user) {
return ;
}
return (
Welcome, {user.email}
{loading ?
Loading...
:
{JSON.stringify(profile, null, 2)}
}
);
}
```
## Provider Props
| Prop | Type | Required | Description |
| ---------------- | ---------------- | -------- | --------------------------------- |
| `baseUrl` | `string` | Yes | API base URL |
| `apiKey` | `string` | No | API key for server authentication |
| `defaultAccount` | `string` | No | Default account slug |
| `timeout` | `number` | No | Request timeout (ms) |
| `maxRetries` | `number` | No | Max retry attempts |
| `storageBackend` | `StorageBackend` | No | Token storage backend |
| `enableLogging` | `boolean` | No | Enable request logging |
| `logLevel` | `LogLevel` | No | Logging level |
## Environment-Specific Setup
### Development
```tsx theme={null}
```
### Production
```tsx theme={null}
```
## With Next.js
### App Router
```tsx theme={null}
// app/layout.tsx
import { SnackBaseProvider } from "@snackbase/sdk/react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
### Pages Router
```tsx theme={null}
// pages/_app.tsx
import type { AppProps } from "next/app";
import { SnackBaseProvider } from "@snackbase/sdk/react";
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
```
## With Vite
```tsx theme={null}
// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { SnackBaseProvider } from "@snackbase/sdk/react";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
);
```
## Access Client Directly
For advanced use cases, access the client directly:
```tsx theme={null}
import { useSnackBase } from "@snackbase/sdk/react";
function AdvancedComponent() {
const client = useSnackBase();
useEffect(() => {
// Use client directly
client.collections.list().then((collections) => {
console.log("Collections:", collections);
});
}, [client]);
return
Check console for collections
;
}
```
## Server-Side Rendering
For SSR, skip provider on server:
```tsx theme={null}
import { SnackBaseProvider } from "@snackbase/sdk/react";
function App({ children }: { children: React.ReactNode }) {
// Only provide on client
if (typeof window === "undefined") {
return <>{children};
}
return (
{children}
);
}
```
## TypeScript Support
The React integration is fully typed:
```tsx theme={null}
import { useAuth, useRecord } from "@snackbase/sdk/react";
import type { User, Post } from "@snackbase/sdk";
function Profile() {
const { user } = useAuth();
const { data: post } = useRecord("posts", "post-id");
// user and post are fully typed
console.log(user?.email);
console.log(post?.title);
}
```
## Complete Example
```tsx theme={null}
import { SnackBaseProvider, useAuth, useRecord } from "@snackbase/sdk/react";
function App() {
return (
);
}
function Main() {
const { user, login, logout, isLoading } = useAuth();
if (isLoading) {
return