# EmojiReactionBar

> Row of reaction chips plus an "add reaction" button that opens an emoji picker.

Source: https://ui.jcsoftdev.com/docs/components/emoji-reaction-bar

Row of reaction chips plus an "add reaction" button that opens an emoji picker.

## Import

```ts
import { EmojiReactionBar } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/emoji-reaction-button`.

## Usage

```tsx
<EmojiReactionBar emoji="🔥" count={7} reacted={false} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `reactions` * | `Reaction[]` |  |  |
| `onReact` | `((emoji: string, reacted: boolean) => void)` |  | Called with the emoji and the new reacted state, from a chip or from the picker. |
| `container` | `HTMLElement \| null` |  | Portal target for the picker; pass an element to keep a scoped `data-style`. |
| `addLabel` | `string` | `"Añadir reacción"` |  |
| `disabled` | `boolean` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-emojireactionbutton--default)
- [Reacted](/storybook/?path=/story/forms-emojireactionbutton--reacted)
- [With Picker](/storybook/?path=/story/forms-emojireactionbutton--with-picker)
- [Narrow](/storybook/?path=/story/forms-emojireactionbutton--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-emojireactionbutton--brutal-preset)

## Source

`packages/ui/src/forms/emoji-reaction-button/emoji-reaction-button.tsx`