Docs
Realtime Avatar Stack

Realtime Avatar Stack

Avatar stack in realtime

Installation

Open in

Folder structure

  • hooks
  • components
  • lib
    • supabase
1import { createClient } from '@/lib/supabase/client'
2import { useEffect, useState } from 'react'
3
4export const useCurrentUserImage = () => {
5  const [image, setImage] = useState<string | null>(null)
6
7  useEffect(() => {
8    const fetchUserImage = async () => {
9      const { data, error } = await createClient().auth.getSession()
10      if (error) {
11        console.error(error)
12      }
13
14      setImage(data.session?.user.user_metadata.avatar_url ?? null)
15    }
16    fetchUserImage()
17  }, [])
18
19  return image
20}

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.

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

PropTypeDefaultDescription
roomNamestringnullThe name of the Supabase Realtime room to connect to

Further reading