Presence roster

UI · v0.1.0

Who is here, kept current from joins and leaves, for any server speaking the presence contract.

Install	copit add @chanx-kit-ui/presence
Or with shadcn	npx shadcn add https://huynguyengl99.github.io/chanx-kit/r/presence.json
Contract	presence@1
Works with	presence
Frameworks	react (the core is framework-free)
npm packages	@chanx-js/client@^0.1.2
Source	ui/presence

Who is here, for any server speaking presence@1, such as the presence server kit. The roster starts from presence_state and follows joins and leaves; a state sent again (after a reconnect) replaces it.

copit add @chanx-kit-ui/presence

React

import { PresenceRoster, usePresence } from '@/chanx-kit/presence/react';
import '@/chanx-kit/presence/presence.css';
import { room } from '@/generated';

export function WhoIsHere({ name, me }: { name: string; me: string }) {
  const { members } = usePresence(room, room.topics.presenceTopic.with({ scope: name }), {
    params: { room: name },
  });
  return <PresenceRoster members={members} self={me} />;
}

refresh() asks for the roster again without reconnecting.

Without a framework

import { connectPresence } from '@/chanx-kit/presence';

const lobby = connectPresence(client, room, room.topics.presenceTopic.with({ scope: 'lobby' }));
lobby.roster.subscribe(() => render(lobby.roster.getSnapshot().members));
lobby.start();

Styling

presence.css is the default look, driven by the shared --chanx-* variables.