Reaction should have key and label to allow mutable text on tooltip to support i18n

[mastepanoski]

Is your feature request related to a problem? Please describe. Currently, the reactions in ReactionBarSelector use a label in the tooltip. If I want to use i18n, it is impossible to have a mutable 'label' and a 'key' to determine in a selection event which emoji was selected.

Now:

   const reactions: Reaction[] = React.useMemo(
        () => [
          {
            label: 'woozy',
            node: <div>🥴</div>,
          },
          {
            label: 'happy',
            node: <div>🙂</div>,
          },
          {
            label: 'exploding-head',
            node: <div>🤯</div>,
          },
        ],
        []
      )

So, the content of 'label' is displayed, and I need to display a different text depending on the language, and I need a label to be a key.

Describe the solution you'd like

A reaction should have this structure, e.g.:

  const reactions: Reaction[] = React.useMemo(
      () => [
        {
          key: 'woozy',
          label: i18n.translate('woozy', i18n.language)
          node: <div>🥴</div>,
        },
        {
          key: 'happy',
          label: i18n.translate('happy', i18n.language)
          node: <div>🙂</div>,
        },
        {
          key: 'exploding-head',
          label: i18n.translate('exploding-head', i18n.language)
          node: <div>🤯</div>,
        },
      ],
      [i18n.language]
   )

And onSelect should get key as a param and not label.

[charkour]

Hi @mastepanoski. Thank you for reporting the issue and for using the library.

This is a great idea. I can make an update to the package by the end of the week unless you would like to make a PR.

[charkour]

This was published in v0.9.0. Thank you!

[charkour]

Please let me know if there are any issues.

[mastepanoski]

Perfect. Ok, I will let you know.