Live user list

See users currently online with <LiveUsers>

Open page in two windows

How to use

Add <LiveUsers>. If the user has no picture, a placeholder made from the user's color and name will be displayed. Change size="", show="", self-suffix="" attributes for more options.

---
import LiveUsers from 'astro-collab/LiveUsers.astro'
---
<!-- Basic -->
<LiveUsers></LiveUsers>

<!-- Change avatar size (pixels) -->
<LiveUsers size="32"></LiveUsers>

<!-- Only show your user info -->
<LiveUsers show="self"></LiveUsers>

<!-- Only show other people's user info -->
<LiveUsers show="others"></LiveUsers>

<!-- Modify the text at the end of your name, default: ' (you)' -->
<LiveUsers self-suffix=" - this is you"></LiveUsers>

---
import 'astro-collab/live-users'
---
<!-- Basic -->
<live-users client:load></live-users>

<!-- Change avatar size (pixels) -->
<live-users size="32" client:load></live-users>

<!-- Only show your user info -->
<live-users show="self" client:load></live-users>

<!-- Only show other people's user info -->
<live-users show="others" client:load></live-users>

A minimal working example can be found here.

Customise

Customise with CSS parts:

<style is:global>
  live-users::part(user) {
    margin-bottom: 12px;
  }

  live-users::part(name) {
    font-weight: 500;
  }
</style>

All CSS parts:

user,
name,
status,
avatar,
avatar_picture_wrapper,
avatar_picture,
avatar_fallback

Important note

All multiplayer components must be wrapped in a single LiveblocksRoom component, check the quick start guide for more info.

Components

@ctnicholasdev