# Realtime Avatar Stack

Avatar stack in realtime

## Installation

Install this block:

```bash
npx shadcn@latest add @supabase/realtime-avatar-stack-nextjs
```

## Folder structure

- `hooks/`
  - `use-current-user-image.ts`
  - `use-current-user-name.ts`
  - `use-realtime-presence-room.ts`
- `components/`
  - `avatar-stack.tsx`
  - `realtime-avatar-stack.tsx`
- `lib/`
  - `supabase/`
    - `client.ts`
    - `middleware.ts`
    - `server.ts`

Full source: https://supabase.com/library/r/realtime-avatar-stack-nextjs.json

## Usage

The `RealtimeAvatarStack` component renders stacked avatars which are connected to Supabase Realtime. It uses the Presence feature of Supabase Realtime. You can use this to show currently online users in a chatroom, game session or collaborative app.

```tsx
import { RealtimeAvatarStack } from '@/components/realtime-avatar-stack'

export default function Page() {
  return (
    <Header className="flex items-center justify-between">
      <h1>Lumon Industries</h1>
      <RealtimeAvatarStack roomName="break_room" />
    </Header>
  )
}
```

## Props

| Prop       | Type     | Default | Description                                          |
| ---------- | -------- | ------- | ---------------------------------------------------- |
| `roomName` | `string` | `null`  | The name of the Supabase Realtime room to connect to |

## Further reading

- [Realtime Presence](https://supabase.com/docs/guides/realtime/presence)
- [Realtime authorization](https://supabase.com/docs/guides/realtime/authorization)