Add Custom Emoji Support

[ealush]

Adding custom emoji support.

Try it live on codesandbox: https://codesandbox.io/s/emoji-picker-react-custom-categories-n26735?file=/src/App.tsx

Installation

emoji-picker-react@4.5.0-rc.1

The custom category behaves as a normal category, and its location or name can be controlled via the normal category config.

Enabling the custom category is simple, add a customEmojis prop to the picker. The custom emojis prop takes an array of custom emojis, each custom emoji has three keys:

1. id: Unique identifier for each of the custom emojis
2. names: an array of string identifiers, will be used both for display, search and indexing.
3. imgUrl: URL for the emoji image

Usage Example:

  <Picker customEmojis={[
          {
            names: ["Film"],
            imgUrl: "https://cdn.jsdelivr.net/npm/eva-icons/fill/svg/film.svg",
            id: "film"
          },
          {
            names: ["Bar Chart"],
            imgUrl:
              "https://cdn.jsdelivr.net/npm/eva-icons/fill/svg/bar-chart.svg",
            id: "bar_chart"
          },
          {
            names: ["champagne", "bottle", "sparkling wine"],
            imgUrl:
              "https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/src/food-drink/drink/1F37E.svg",
            id: "champagne"
          }
    ]}
  />