Components
Emoji Input Element

Emoji Input Element

Emoji input element with search functionality and emoji insertion.

Installation

Install the following dependencies:

npm install @udecode/plate-emoji @udecode/plate-selection @udecode/plate-combobox @ariakit/[email protected] @radix-ui/react-slot @radix-ui/react-tooltip @radix-ui/react-popover

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Emoji

😃 Emoji Input

The Emoji Input feature allows you to easily insert emojis into your text using an intuitive inline search.
How to use Emoji Input:
  • Type ":" anywhere in your text to trigger the emoji search.
  • Continue typing to search for specific emojis.
  • Use arrow keys or mouse to navigate through the results.
  • Press Enter or click to insert the selected emoji.
Try it out! Type ":" followed by an emoji name, like "smile" or "heart".