snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

packages/commenting/src/ui/reactions.tsx

@@ -0,0 +1,74 @@
+import { ComponentType } from 'react'
+import { Reaction, ReactionTooltipProps, RenderReaction } from './reaction'
+
+/** One person who reacted with a given emoji, for the hover list. @public */
+export interface ReactionReactor {
+	/** Display name of the person who reacted. */
+	name: string
+	/** True for the current user. */
+	you: boolean
+}
+
+/** One emoji's reactions on a comment, already tallied. @public */
+export interface ReactionSummary {
+	emoji: string
+	/** How many people reacted with this emoji. */
+	count: number
+	/** True when the current user is one of them — renders the pill highlighted. */
+	active: boolean
+	/** Who reacted with this emoji, in reaction order — shown in the hover list. */
+	reactors: ReactionReactor[]
+}
+
+/** @public */
+export interface ReactionsProps {
+	/** The comment's reactions, grouped by emoji. Empty renders nothing. */
+	reactions: ReactionSummary[]
+	/** Toggles the current user's reaction for an emoji. */
+	onToggle?(emoji: string): void
+	/** Whether the current user may react. False makes the pills inert (e.g. a signed-out
+	 *  viewer, or a read-only thread) while still showing counts. */
+	canReact?: boolean
+	/** Whether hovering a pill shows its reactor list. Pass false to suppress it — e.g. while
+	 *  another popup menu on the comment is open. Defaults to true. */
+	enableHoverList?: boolean
+	/** How to draw each emoji token. Defaults to the token string (OS emoji font). */
+	renderReaction?: RenderReaction
+	/** The tooltip naming who reacted, shown when a pill is hovered. Defaults to an inline sentence
+	 *  (`DefaultReactionTooltip`). Swap it to render the reactor list however you like. */
+	ReactionTooltip?: ComponentType<ReactionTooltipProps>
+}
+
+/**
+ * The row of tallied reactions under a comment. Presentational — the host supplies the summaries
+ * and owns what toggling does. Hovering a pill lists who reacted (see `Reaction`).
+ *
+ * The add-reaction affordance is a separate component (`ReactionPicker`) so it can live outside
+ * this row — on a comment card it sits with the card's hover actions, which keeps its position
+ * fixed as reactions are added here.
+ * @public @react
+ */
+export function Reactions({
+	reactions,
+	onToggle,
+	canReact = true,
+	enableHoverList = true,
+	renderReaction,
+	ReactionTooltip,
+}: ReactionsProps) {
+	if (reactions.length === 0) return null
+	return (
+		<div className="tlui-cmt-reactions">
+			{reactions.map((reaction) => (
+				<Reaction
+					key={reaction.emoji}
+					{...reaction}
+					enableHoverList={enableHoverList}
+					renderReaction={renderReaction}
+					ReactionTooltip={ReactionTooltip}
+					onClick={canReact ? () => onToggle?.(reaction.emoji) : undefined}
+				/>
+			))}
+		</div>
+	)
+}