Skip to main content

​
Overview

Fetches the member list for a conversation on mount and provides actions to add members, remove members, change roles, and leave the conversation. Also exposes upsertMember and removeMemberLocally for real-time socket-driven updates.
Requires ChatProvider in the component tree.

​
Usage Example

import { useConversationMembers } from "@replyke/react-js";

function MemberList({ conversationId }: { conversationId: string }) {
  const {
    members,
    loading,
    addMember,
    removeMember,
    changeRole,
    leave,
  } = useConversationMembers({ conversationId });

  if (loading) return <div>Loading members...</div>;

  return (
    <ul>
      {members.map((m) => (
        <li key={m.userId}>
          {m.user?.name} — {m.role}
          <button onClick={() => removeMember({ userId: m.userId })}>Remove</button>
          <button onClick={() => changeRole({ userId: m.userId, role: "admin" })}>
            Make Admin
          </button>
        </li>
      ))}
      <button onClick={leave}>Leave conversation</button>
    </ul>
  );
}

​
Props

​
conversationId
string
required
The ID of the conversation whose members to fetch.

​
Returns

​
members
ConversationMember[]
The current member list. See ConversationMember.
​
loading
boolean
true while the initial fetch is in progress.
​
addMember
({ userId: string }) => Promise<void>
Adds a user to the conversation. Updates the local member list on success.
​
removeMember
({ userId: string }) => Promise<void>
Removes a user from the conversation. Updates the local member list on success.
​
leave
() => Promise<void>
Removes the current user from the conversation.
​
changeRole
({ userId: string; role: 'admin' | 'member' }) => Promise<void>
Updates a member’s role. Updates the local member list on success.
​
upsertMember
(member: ConversationMember) => void
Inserts or replaces a member in the local list by userId. Intended for use with real-time socket event handlers.
​
removeMemberLocally
({ userId: string }) => void
Removes a member from the local list by userId without making an API call. Intended for use with real-time socket event handlers.

​
Notes

  • The member list is fetched with a limit of 100. For very large conversations, consider lazy-loading or paginating members separately.
  • For integration guidance, see Chat: Conversations.