Emoji Picker

To use existing react components inside the form engine is very easy. In this example we will use emoji-mart to ask our users for an emoji selection.

import * as React from "react";
import { Model, _ } from "@flowable/forms";
import { Picker } from "emoji-mart";
import "emoji-mart/css/emoji-mart.css";

export function EmojiPicker(props: Model.Props) {
  const { config } = props;
  return (
    <div id={config.id} className="flw__component">
      <Picker emoji={props.config.value} onSelect={(emoji) => props.onChange(emoji.id)} />
    </div>
  );
}

We are using 2 props from emoji-mart: emoji to tell to the component wich is the selected emoji and onSelect to be notified when the user has selected an emoji.