ReactionBar

Install

import { ReactionBar } from "@/components/ouro/reaction-bar/reaction-bar";

Example

<ReactionBar reactions={message.reactions} quick={quickReactions} onReact={(key) => toggleReaction(message.id, key)} />

Usage

Place it in Message's attachments.

Use instead when

• Use ToggleGroup instead for a choice between options, and Badge for a single count.

Props

Type: ReactionBarProps.

className

Type: string

Layout only: margins, placement (mt-1). Appearance classes warn in development.

disabled

Type: boolean

Keeps the counts but turns off reacting, for example while the app is offline.

label

Type: string

Default: "Reactions"

What screen readers hear for the group, for other languages.

mineLabel

Type: string

Default: "including you"

What screen readers hear after a read-only reaction that is the person's own.

onReact

Type: ((key: string, event: MouseEvent<HTMLElement>) => void)

Called with a reaction's key when it is pressed, to add the person's reaction or take it back. The click event comes second, so the app can check event.isTrusted before it acts. Without it the reactions are read-only.

quick

Type: readonly ReactionOption[]

Reactions offered for a single press, after the counts. One that is already in reactions shows there instead. Shown only with onReact.

reactions (required)

Type: readonly Reaction[]

The message's reactions, in the order they show.

ref

Type: Ref<HTMLDivElement>

Reaches the rendered element.

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

• items: Not a prop. The reactions are reactions: <ReactionBar reactions={message.reactions}>.
• onReactionClick: Not a prop. A pressed reaction calls onReact: <ReactionBar onReact={(key) => react(key)}>.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2). Your classes always win over Ouro UI's: ReactionBar merges className last with cn (tailwind-merge), so a class that conflicts with its own replaces it.^{layout-classes}

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.

Types

Reaction

A reaction on a message, with how many people chose it.

interface Reaction extends ReactionOption {
  /** How many people reacted this way. */
  count: number;
  /** The person using the app is one of them: the reaction is pressed and tinted. */
  mine?: boolean | undefined;
}

ReactionOption

A reaction someone can add: its key, its spoken name and what it shows.

interface ReactionOption {
  /** Identifies the reaction ("like"); `onReact` receives it. */
  key: string;
  /** What screen readers hear for it ("Like"). */
  label: string;
  /** What it shows: an emoji ("👍") or an icon element. Screen readers hear `label` instead. */
  emoji: ReactNode;
}