Usage Guide

Welcome to the Usage Guide!
This page will walk you through installation and basic usage.

Installation

Install the package with your preferred package manager:

npm install @raihancodes/tiptap-extension-twemoji-react
# or
pnpm add @raihancodes/tiptap-extension-twemoji-react
# or
yarn add @raihancodes/tiptap-extension-twemoji-react

Basic Example

Example

Import the extension and add it to your editor:

import { useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";
import { TwemojiExtension } from "@raihancodes/tiptap-extension-twemoji-react";

export default function Editor() {
  const editor = useEditor({
    extensions: [StarterKit, TwemojiExtension],
    content: "<p>Hello World!</p>",
    immediatelyRender: false,
  });

  return <EditorContent editor={editor} />;
}

Move Twemoji to assets

Download the image from here then move it to your public/assets/ folder. The image location can be anywhere in your public or on CDN, see here to adjust spriteUrl

Congratulations!

Congratulations! Twemoji is now working in your editor. You can start typing :smile , :hug: , XD , or paste any emoji, and see it rendered instantly.

Next Steps

👉 Check out the Custom Emojis section to learn about how to add or upload Custom Emojis.
👉 Check out the Deep Dive section to learn how to customize the extension—header, navigation, cell size, custom emojis, etc.