Emoji Dropdown Menu
Available in Start plan
A fully accessible emoji dropdown menu for Tiptap editors. Provides intelligent emoji suggestions as you type with the : trigger character, offering seamless emoji insertion with keyboard navigation support.
Installation
Add the component via the Tiptap CLI:
npx @tiptap/cli@latest add emoji-dropdown-menuComponents
<EmojiDropdownMenu />
A prebuilt React component that provides emoji suggestions triggered by typing :.
Usage
import * as React from 'react' import { EditorContent, EditorContext, useEditor } from '@tiptap/react' // --- Tiptap Core Extensions --- import { StarterKit } from '@tiptap/starter-kit' import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji' // --- Tiptap UI --- import { EmojiDropdownMenu } from '@/components/tiptap-ui/emoji-dropdown-menu' // --- Tiptap Node --- import '@/components/tiptap-node/code-block-node/code-block-node.scss' import '@/components/tiptap-node/paragraph-node/paragraph-node.scss' export const EmojiDropdownMenuExample = () => { const editor = useEditor({ immediatelyRender: false, extensions: [ StarterKit, Emoji.configure({ emojis: gitHubEmojis, forceFallbackImages: true, }), ], content: ` <p>Try typing <code>:</code> to open the emoji dropdown menu.</p> `, }) return ( <EditorContext.Provider value={{ editor }}> <EmojiDropdownMenu char=":" /> <EditorContent editor={editor} /> </EditorContext.Provider> ) }Props
The EmojiDropdownMenu inherits all props from SuggestionMenuProps.