# React SDK

> React hooks and context for Aerostack — auth, realtime, and presence. Works with React, Next.js, Remix, and any React-based framework.

The `@aerostack/react` package provides React hooks and context for auth and realtime features. It's designed for client-side use in React, Next.js, Remix, and any other React-based framework.

## Install

```bash
npm install @aerostack/react
```

## Setup

Wrap your app with `AerostackProvider`:

```tsx
// app.tsx (or _app.tsx for Next.js pages router)

  return (
    
      {children}
    
  )
}
```

### Provider props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `projectId` | `string` | Yes | Your Aerostack project ID |
| `apiKey` | `string` | Yes | Your project's public API key |
| `baseUrl` | `string` | No | API base URL (default: `https://api.aerostack.dev/v1`) |

The `apiKey` here is your **public** project key (safe to expose to the browser). Never use your admin or secret key on the client.

## Available hooks

| Hook | Description |
|------|-------------|
| `useAuth()` | Authentication state and methods |
| `useAerostack()` | Access to `sdk`, `realtime`, and provider config |

## Quick usage

```tsx

function MyComponent() {
  const { user, signIn, signOut, loading } = useAuth()

  if (loading) return <p>Loading...</p>
  if (!user) return <button onClick={() => signIn(email, pw)}>Sign in</button>
  return (
    <div>
      <p>Hello, {user.name}</p>
      <button onClick={signOut}>Sign out</button>
    </div>
  )
}
```

## Next steps

- [Authentication](/sdk/react/auth) — full `useAuth` hook reference
- [Realtime](/sdk/react/realtime) — `useAerostack` + channel subscriptions
- [Hooks Reference](/sdk/react/hooks-reference) — complete API table