how to use it in react-quill?

[leeseean]

import ReactQuill from 'react-quill';
import 'quill-emoji';

 <ReactQuill
                   theme="snow"
                    value={this.state.comment}
                    onChange={this.handleChangeComment}
                    modules={{
                        toolbar: [
                            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                            [{ 'font': [] }],
                            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                            [{ 'align': [] }],
                            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
                            [{ 'direction': 'rtl' }],                         // text direction
                            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
                            ['blockquote', 'code-block'],

                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            [{ 'color': [] }, { 'background': [] }],  
                            ['emoji'],        // dropdown with defaults from theme
                            ['image', 'video', 'link'],

                            ['clean']
                        ]
                    }}
                />

it`s not working

[spech66]

import React from "react";
import ReactQuill, { Quill } from "react-quill";
import quillEmoji from "quill-emoji";
import "react-quill/dist/quill.snow.css";
import "quill-emoji/dist/quill-emoji.css";

Quill.register(
    {
        "formats/emoji": quillEmoji.EmojiBlot,
        "modules/emoji-toolbar": quillEmoji.ToolbarEmoji,
        "modules/emoji-textarea": quillEmoji.TextAreaEmoji,
        "modules/emoji-shortname": quillEmoji.ShortNameEmoji,
    },
    true,
);

    modules = {
        toolbar: [
            ...
            ["emoji"],
            ["clean"],
        ],

        "emoji-toolbar": true,
        "emoji-textarea": false,
        "emoji-shortname": true,
}


    formats = ["header", "bold", "italic", "underline", "strike", "list", "indent", "align", "clean", "emoji"];

    render() {
        return (
                <ReactQuill
                    modules={this.modules}
                    formats={this.formats}

[KiranVH]

import React from "react";
import ReactQuill, { Quill } from "react-quill";
import quillEmoji from "quill-emoji";
import "react-quill/dist/quill.snow.css";
import "quill-emoji/dist/quill-emoji.css";

Quill.register(
    {
        "formats/emoji": quillEmoji.EmojiBlot,
        "modules/emoji-toolbar": quillEmoji.ToolbarEmoji,
        "modules/emoji-textarea": quillEmoji.TextAreaEmoji,
        "modules/emoji-shortname": quillEmoji.ShortNameEmoji,
    },
    true,
);

    modules = {
        toolbar: [
            ...
            ["emoji"],
            ["clean"],
        ],

        "emoji-toolbar": true,
        "emoji-textarea": false,
        "emoji-shortname": true,
}


    formats = ["header", "bold", "italic", "underline", "strike", "list", "indent", "align", "clean", "emoji"];

    render() {
        return (
                <ReactQuill
                    modules={this.modules}
                    formats={this.formats}

would you be able to provide me the full code for emoji file. I am still unable to click and add emoji's from popup in toolbar but for text-area it is working fine

[hkvega01]

import React from "react";
import ReactQuill, { Quill } from "react-quill";
import quillEmoji from "quill-emoji";
import "react-quill/dist/quill.snow.css";
import "quill-emoji/dist/quill-emoji.css";

Quill.register(
    {
        "formats/emoji": quillEmoji.EmojiBlot,
        "modules/emoji-toolbar": quillEmoji.ToolbarEmoji,
        "modules/emoji-textarea": quillEmoji.TextAreaEmoji,
        "modules/emoji-shortname": quillEmoji.ShortNameEmoji,
    },
    true,
);

    modules = {
        toolbar: [
            ...
            ["emoji"],
            ["clean"],
        ],

        "emoji-toolbar": true,
        "emoji-textarea": false,
        "emoji-shortname": true,
}


    formats = ["header", "bold", "italic", "underline", "strike", "list", "indent", "align", "clean", "emoji"];

    render() {
        return (
                <ReactQuill
                    modules={this.modules}
                    formats={this.formats}

would you be able to provide me the full code for emoji file. I am still unable to click and add emoji's from popup in toolbar but for text-area it is working fine

emoji-close-div is covering everything that make the popup close