Reaction Bar

Likes and reactions. Pro · Content and social › Social

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add reaction-bar

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ReactionBar } from 'valyro-ui-pro';

Prop	Type	Default
`value`	`Reaction[]`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`Reaction[]`	`[]`	Initial `value` when uncontrolled.
`onValueChange`	`(reactions: Reaction[]) => void`		Called with the new `value` when it changes.
`onReact`	`(emoji: string, reacted: boolean) => void`		Fired for every toggle, with the viewer's new state for that emoji.
`options`	`ReactionOption[]`		A fixed set of reactions offered in a compact grid. Without it the full EmojiPicker opens (search, categories, skin tones, recently used).
`pickerOpen`	`boolean`		Whether the reaction picker is open.
`defaultPickerOpen`	`boolean`	`false`	Picker open on first render (uncontrolled); it does not take focus then, only when opened later.
`onPickerOpenChange`	`(open: boolean) => void`		Called when the picker opens or closes.
`size`	`'sm' \| 'md'`	`'md'`	Chip height: `md` 32px (default, under posts and messages), `sm` 28px (dense rows such as comments).
`locale`	`string`		Locale for counts (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<ReactionBarLabels>`		Overrides for the built-in English text; keys left out keep their defaults.