Reactions

Display, add and remove reactions on existing messages


By itself, the Reactions component does not show the message it belongs to. Click here to see it in context paired with a Message component!

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 #

React:
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}
        />
      )}
    </>
  );
};
Vanilla JavaScript:
<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}
        />
      )}
    </>
  );
};
Copy

Properties #


threadId #

optional
string
An arbitrary string that uniquely identifies a thread. This thread must contain the message specified with messageId.
If no valid thread ID is set, reactions is rendered in a disabled state.

messageId #

optional
string
An arbitrary string that uniquely identifies a message. This message ID is for the message you want the reactions to belong to. This message must belong in the thread specified with threadId.
If no valid message ID is set, reactions is rendered in a disabled state.

showAddReactionButton #

optional
boolean
When true, a button to add reactions is appended to the parent container.
The default value is true.

showReactionList #

optional
boolean
When true, a container displaying reactions is prepended to the parent container.
The default value is true.

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.

Class nameDescription
.cord-reactions-container
Applied to the container div. This class is always present.
.cord-reaction-list
Applied to the div containing reactions and the add reaction button.
.cord-add-reaction
Applied to the add reaction button element
.cord-pill
Applied to the div element containing the emoji unicode and the number of reactions.
.cord-from-viewer
Applied to the reaction pill that contains a reaction that the viewer has already reacted with.
.cord-emoji
Applied to the span element containing the emoji unicode.
.cord-count
Applied to the p element containing the number of reactions.

Ask Cordy