Plate

Components

Emoji Toolbar Dropdown

Display an emoji selection menu within a toolbar interface.

Installation

npx @udecode/plate-ui@latest add emoji-toolbar-dropdown

Examples

🙂 Emoji's

Express yourself with a touch of fun 🎉 and emotion 😃.

Pick from the toolbar or type a colon to open the combobox.

import React from 'react';
 
import {
  type EmojiDropdownMenuOptions,
  useEmojiDropdownMenuState,
} from '@udecode/plate-emoji';
 
import { Icons } from '@/components/icons';
 
import { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons';
import { EmojiPicker } from './emoji-picker';
import { EmojiToolbarDropdown } from './emoji-toolbar-dropdown';
import { ToolbarButton } from './toolbar';
 
type EmojiDropdownMenuProps = {
  options?: EmojiDropdownMenuOptions;
} & React.ComponentPropsWithoutRef<typeof ToolbarButton>;
 
export function EmojiDropdownMenu({
  options,
  ...props
}: EmojiDropdownMenuProps) {
  const { emojiPickerState, isOpen, setIsOpen } =
    useEmojiDropdownMenuState(options);
 
  return (
    <EmojiToolbarDropdown
      control={
        <ToolbarButton isDropdown pressed={isOpen} tooltip="Emoji" {...props}>
          <Icons.emoji className="size-4" />
        </ToolbarButton>
      }
      isOpen={isOpen}
      setIsOpen={setIsOpen}
    >
      <EmojiPicker
        {...emojiPickerState}
        icons={{
          categories: emojiCategoryIcons,
          search: emojiSearchIcons,
        }}
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        settings={options?.settings}
      />
    </EmojiToolbarDropdown>
  );
}