Hooks

Hooks are functions that you can call inside theme components to access data. When the data changes, the component will automatically re-render with the new data.

Here's an example component that lists the names of up to 10 participants in a conversation.

1import { html, useParticipants } from "@talkjs/react-components";
2
3export function MyComponent({ common }) {
4  const participants = useParticipants(common.conversation.id, 10);
5
6  return html`<div>
7    ${participants.map(p => html`<span key=${p.user.id}>${p.user.name}</span>`)}
8  </div>`;
9}

useParticipants(conversationId, limit): ParticipantSnapshot[]