Reactions

When to use #

The Reactions component renders both a container that displays reactions and a button you can use to add and remove reactions belonging to a particular message. This component works similarly to reactions you might have seen in Slack or WhatsApp. When the user clicks an existing reaction, they will react to the message with the same emoji and the count will increase. If they select the same reaction a second time, their reaction will be removed and the count will decrease.

You can use this alongside other Cord components to build any message layout that you might need. For example, you can use our Thread API to get the thread and messages IDs you need to hook this up to the exact message you want.

How to use #

import { Reactions, thread } from "@cord-sdk/react";

// Adding a Reactions component to the first message of a thread.
export const Example = () => {
  const threadId = useMemo(() => 'thread-' + Date.now(), []);
  const threadSummary = thread.useThread(threadId);

  return (
    <>
      <p>Add an initial message which you can react to:</p>
      {threadId && <Thread threadId={threadId} />}
      {threadId && threadSummary?.thread.firstMessage?.id && (
        <Reactions
          threadId={threadId}
          messageId={threadSummary?.thread.firstMessage.id}
        />
      )}
    </>
  );
};

<script>
  const threadId = 'thread-' + Date.now();

  const reactions = document.createElement('cord-reactions');
  const thread = document.createElement('cord-thread');

  thread.setAttribute('thread-id', threadId);
  document.body.appendChild(thread);
  document.body.appendChild(reactions);

  const ref = window.CordSDK.thread.observeThread(
    threadId,
    (summary) => {
      // Received an update!
      if (summary.thread.firstMessage) {
        reactions.setAttribute('message-id', summary.thread.firstMessage.id);
        reactions.setAttribute('thread-id', threadId);
        window.CordSDK.thread.unobserveThread(ref);
      }
    },
  );
</script>

import { Reactions, thread } from "@cord-sdk/react";

// Adding a Reactions component to the first message of a thread.
export const Example = () => {
  const threadId = useMemo(() => 'thread-' + Date.now(), []);
  const threadSummary = thread.useThread(threadId);

  return (
    <>
      <p>Add an initial message which you can react to:</p>
      {threadId && <Thread threadId={threadId} />}
      {threadId && threadSummary?.thread.firstMessage?.id && (
        <Reactions
          threadId={threadId}
          messageId={threadSummary?.thread.firstMessage.id}
        />
      )}
    </>
  );
};

CSS customization #

If you want to customize this component, you can target the classes below in your app's CSS. These are guaranteed to be stable.