API Reference – @liveblocks/react-ui

import { Thread } from "@liveblocks/react-ui";import { useThreads } from "@liveblocks/react/suspense";
function Component() {  const { threads } = useThreads();
  return (    <>      {threads.map((thread) => (        <Thread key={thread.id} thread={thread} />      ))}    </>  );}

import { Composer } from "@liveblocks/react-ui";
// Creates a new threadfunction Component() {  return <Composer />;}

import { Composer } from "@liveblocks/react-ui";
// Creates a new thread with custom metadatafunction Component() {  return (    <Composer      metadata={{        // Custom metadata here, e.g. colors, coordinates        color: "purple",        x: 80,        y: 120,      }}    />  );}

import { Composer } from "@liveblocks/react-ui";
// Adds a new comment to a threadfunction Component({ threadId }) {  return <Composer threadId={threadId} />;}

import { Composer } from "@liveblocks/react-ui";
// Edits an existing commentfunction Component({ threadId, commentId }) {  return <Composer threadId={threadId} commentId={commentId} />;}

import { Composer } from "@liveblocks/react-ui";import { useEditComment, useAddReaction } from "@liveblocks/react/suspense";
// Custom submission behavior (edits a comment and adds a reaction)function Component({ threadId, commentId }) {  const editComment = useEditComment();  const addReaction = useAddReaction();
  return (    <Composer      onComposerSubmit={({ body, attachments }, event) => {        event.preventDefault();
        // Example mutations        editComment({ threadId, commentId, body, attachments });        addReaction({ threadId, commentId, emoji: "✅" });
        // Other custom behavior        // ...      }}    />  );}

import { Comment } from "@liveblocks/react-ui";import { ThreadData } from "@liveblocks/client";
// Renders a list of comments attach to the specified `thread`function Component({ thread }: { thread: ThreadData }) {  return (    <>      {thread.comments.map((comment) => (        <Comment key={comment.id} comment={comment} />      ))}    </>  );}

import { Comment, Composer } from "@liveblocks/react-ui";import { ThreadData } from "@liveblocks/client";import { useThreads } from "@liveblocks/react/suspense";
// Renders a list of comments and a composer for adding new commentsfunction CustomThread({ thread }: { thread: ThreadData }) {  return (    <>      {thread.comments.map((comment) => (        <Comment key={comment.id} comment={comment} />      ))}      <Composer threadId={thread.id} />    </>  );}
// Renders a list of custom thread componentsfunction Component() {  const { threads } = useThreads();
  return (    <>      {threads.map((thread) => (        <CustomThread key={thread.id} />      ))}    </>  );}

import { Button } from "@/my-design-system";
// Use the default <button> element<Composer.Submit disabled>Send</Composer.Submit>;
// Use an existing custom <Button> component<Composer.Submit disabled asChild>  <Button variant="primary">Send</Button></Composer.Submit>;

<Composer.Form>  <Composer.AttachmentsDropArea />  <Composer.Editor    components={{      Mention: () => <Composer.Mention />,      MentionSuggestions: () => (        <Composer.Suggestions>          <Composer.SuggestionsList>            <Composer.SuggestionsListItem />          </Composer.SuggestionsList>        </Composer.Suggestions>      ),      Link: () => <Composer.Link />,    }}  />  <Composer.AttachFiles />  <Composer.Submit /></Composer.Form>

import {  Composer,  CommentBodyLinkProps,  CommentBodyMentionProps,  ComposerEditorMentionSuggestionsProps,  ComposerSubmitComment,} from "@liveblocks/react-ui/primitives";import { useCreateThread, useUser } from "@liveblocks/react/suspense";import { FormEvent } from "react";
// Render a custom composer that creates a thread on submitfunction MyComposer() {  const createThread = useCreateThread();
  function handleComposerSubmit(    { body, attachments }: ComposerSubmitComment,    event: FormEvent<HTMLFormElement>  ) {    event.preventdefault();
    // Create a new thread    const thread = createThread({      body,      attachments,      metadata: {},    });  }
  return (    <Composer.Form onComposerSubmit={handleComposerSubmit}>      <Composer.Editor        components={{          Mention,          MentionSuggestions,          Link,        }}      />      <Composer.Submit>Create thread</Composer.Submit>    </Composer.Form>  );}
// Render a mention in the composer's editor, e.g. "@Emil Joyce"function Mention({ userId }: CommentBodyMentionProps) {  return <Comment.Mention>@{userId}</Comment.Mention>;}
// Render a list of mention suggestions, used after typing "@" in the editorfunction MentionSuggestions({  userIds,  selectedUserId,}: ComposerEditorMentionSuggestionsProps) {  return (    <Composer.Suggestions>      <Composer.SuggestionsList>        {userIds.map((userId) => (          <MentionSuggestion key={userId} userId={userId} />        ))}      </Composer.SuggestionsList>    </Composer.Suggestions>  );}
// Render a single mention suggestion from a `userId`function MentionSuggestion({ userId }: { userId: string }) {  const { user } = useUser(userId);
  return (    <Composer.SuggestionsListItem value={user.id}>      <img src={user.avatar} alt={user.name} />      {user.name}    </Composer.SuggestionsListItem>  );}
// Render a link in the composer's editor, e.g. "https://liveblocks.io"function Link({ href, children }: CommentBodyLinkProps) {  return <Comment.Link href={href}>{children}</Comment.Link>;}

<Composer.Form  onComposerSubmit={({ body, attachments }) => {    // Mutate your comments    // ...  }}>  {/* ... */}</Composer.Form>

<Composer.Editor  components={{    Mention: ({ userId, isSelected }) => (      <Composer.Mention>@{userId}</Composer.Mention>    ),  }}/>

<Composer.Editor  components={{    MentionSuggestions: () => (      <Composer.Suggestions>        <Composer.SuggestionsList>          <Composer.SuggestionsListItem />        </Composer.SuggestionsList>      </Composer.Suggestions>    ),  }}/>

<Composer.Editor  components={{    Link: ({ href, children }) => <Composer.Link>{children}</Composer.Link>,  }}/>

<Composer.SuggestionsList>  {userIds.map((userId) => (    <Composer.SuggestionsListItem key={userId} value={userId}>      @{userId}    </Composer.SuggestionsListItem>  ))}</Composer.SuggestionsList>

<Composer.SuggestionsListItem key={userId} value={userId}>  @{userId}</Composer.SuggestionsListItem>

<Comment.Body  components={{    Mention: <Comment.Mention />,    Link: <Comment.Link />,  }}/>

import {  Comment,  CommentBodyLinkProps,  CommentBodyMentionProps,} from "@liveblocks/react-ui/primitives";import { ThreadData } from "@liveblocks/client";
// Render custom comments in a thread. Pass a thread from `useThreads`.function MyComments({ thread }: { thread: ThreadData }) {  return (    <>      {thread.comments.map((comment) => (        <div key={comment.id}>          <Comment.Body            body={comment.body}            components={{              Mention,              Link,            }}          />        </div>      ))}    </>  );}
// Render a mention in the comment, e.g. "@Emil Joyce"function Mention({ userId }: CommentBodyMentionProps) {  return <Comment.Mention>@{userId}</Comment.Mention>;}
// Render a link in the comment, e.g. "https://liveblocks.io"function Link({ href, children }: CommentBodyLinkProps) {  return <Comment.Link href={href}>{children}</Comment.Link>;}

<Comment.Body  components={{    Mention: ({ userId }) => <Comment.Mention>@{userId}</Comment.Mention>,  }}/>

<Comment.Body  components={{    Link: ({ href, children }) => (      <Comment.Link href={href}>{children}</Comment.Link>    ),  }}/>

import { ThreadData, Timestamp } from "@liveblocks/react-ui";
function MyComments({ thread }: { thread: ThreadData }) {  return (    <>      {thread.comments.map((comment) => (        <div key={comment.id}>          <Timestamp date={comment.createdAt} />          <Comment.Body body={comment.body} components={/* ... */} />        </div>      ))}    </>  );}

import { CommentData, FileSize } from "@liveblocks/react-ui";
function MyComment({ comment }: { comment: CommentData }) {  return (    <div>      {/* ... */}
      {comment.attachments.map((attachment) => (        <div key={attachment.id}>          {attachment.name}          <FileSize size={attachment.size} />        </div>      ))}    </div>  );}

import { useComposer } from "@liveblocks/react-ui/primitives";
const { isEmpty, attachments, submit /* ... */ } = useComposer();

import { Composer, useComposer } from "@liveblocks/react-ui/primitives";import { useCreateThread } from "@liveblocks/react/suspense";
function MyComposer() {  const createThread = useCreateThread();  const { createMention } = useComposer();
  return (    <Composer.Form      onComposerSubmit={({ body, attachments }) => {        const thread = createThread({          body,          attachments,          metadata: {},        });      }}    >      <Composer.Editor components={/* Your custom component parts */} />      <button onClick={createMention}>Add mention</button>    </Composer.Form>  );}

import { Composer, useComposer } from "@liveblocks/react-ui/primitives";import { useCreateThread } from "@liveblocks/react/suspense";
function MyComposer() {  const createThread = useCreateThread();
  return (    <Composer.Form onComposerSubmit={({ body, attachments }) => {      const thread = createThread({        body,        attachments,        metadata: {},      });    }}>      <Composer.Editor components={/* Your custom component parts */} />      <MyComposerAttachments />      <Composer.AttachFiles>Attach Files</Composer.AttachFiles>      <Composer.Submit>Submit</Composer.Submit>    </Composer.Form>  );}
function MyComposerAttachments() {  const { attachments, removeAttachment } = useComposer();
  return (    <div>      {attachments.map((attachment) => (        <div key={attachment.id}>          {attachment.name} ({attachment.status})          <button onClick={() => removeAttachment(attachment.id)}>Remove</button>        </div>      )}    </div>  );}

import { InboxNotification } from "@liveblocks/react-ui";import { useInboxNotifications } from "@liveblocks/react/suspense";
function Component() {  const { inboxNotifications } = useInboxNotifications();
  return (    <>      {inboxNotifications.map((inboxNotification) => (        <InboxNotification          key={inboxNotification.id}          inboxNotification={inboxNotification}        />      ))}    </>  );}

<InboxNotification  inboxNotification={inboxNotification}  kinds={{    thread: (props) => (      <InboxNotification.Thread {...props} showRoomName={false} />    ),    $myCustomNotification: (props) => (      <InboxNotification.Custom        {...props}        title="New notification"        aside={<InboxNotification.Icon>❕</InboxNotification.Icon>}      >        My custom notification      </InboxNotification.Custom>    ),  }}/>

<InboxNotification  inboxNotification={inboxNotification}  kinds={{    $myCustomNotification: (props) => <div>New notification</div>,  }}/>

<InboxNotification  inboxNotification={inboxNotification}  kinds={{    $alert: (props) => {      // `title` and `message` are correctly typed, as defined in your config      const { title, message } = props.inboxNotification.activities[0].data;
      return (        <InboxNotification.Custom          {...props}          title={title}          aside={<InboxNotification.Icon>❗</InboxNotification.Icon>}        >          {message}        </InboxNotification.Custom>      );    },  }}/>

import {  InboxNotification,  InboxNotificationCustomKindProps,} from "@liveblocks/react-ui";
function AlertNotification(props: InboxNotificationCustomKindProps<"$alert">) {  // `title` and `message` are correctly typed, as defined in your config  const { title, message } = props.inboxNotification.activities[0].data;
  return (    <InboxNotification.Custom      {...props}      title={title}      aside={<InboxNotification.Icon>❗</InboxNotification.Icon>}    >      {message}    </InboxNotification.Custom>  );}
function Notification({ inboxNotification }) {  return (    <InboxNotification      inboxNotification={inboxNotification}      kinds={{ $alert: AlertNotification }}    />  );}

<InboxNotification  inboxNotification={inboxNotification}  kinds={{    thread: (props) => (      <InboxNotification.Thread {...props} showRoomName={false} />    ),  }}/>

<InboxNotification  inboxNotification={inboxNotification}  kinds={{    $myCustomNotificationKind: (props) => {      const activityData = props.inboxNotification.activities[0].data;
      return(        <InboxNotification.Custom          title={<>User <strong>{activityData.file}</strong></>}          aside={<InboxNotification.Icon>❌</InboxNotification.Icon>}          {...props}        >          {activityData.errorDescription}        </InboxNotification>      )    },  }}/>

<InboxNotificationList>  <InboxNotification />  <InboxNotification />  <InboxNotification /></InboxNotificationList>