Not able to display the emoji list with react

[omaijdot]

Hi, may i know how to use this emoji with react? i tried using this emoji in my JSX file, and the emoji button not able to display the emoji selection. do i miss something?

[RobertMenke]

Hey @omaijdot so you should be able to use this library with React, but jQuery is a peer dependency meaning that you'll also have to have jQuery installed as an NPM dependency.

Also, make sure that you're instantiating the picker inside of componentDidMount. It should look something like this:

import React from "react"
import EmojiPicker from "rm-emoji-picker"

class EmojiContainer extends React.Component {

      render () {
            return (
                 <div className="emoji-container" ref="emoji_container">
                        <pre className="input-area" contenteditable="true" ref="editor"></pre>
                        <img src="/your/emoji-icon.something" ref="icon" />
                </div>
            )
     }


     componentDidMount () {
            const container = this.refs.emoji_container
            const editor = this.refs.editor
            const icon    = this.refs.icon

            const picker = new EmojiPicker()
            picker.listenOn(icon, container, editor)
     }
}

Hope this helps. In summary, make sure you have jQuery installed and make sure that the DOM nodes you're passing to the picker are instances of HTMLElement.

[omaijdot]

Thanks it works. now the emoji selection is shown. now, i just need to play around with css to fix the cosmetic.

and could you please explain to me regards callback function below code

callback : (emoji, category, node) => {
if(node instanceof HTMLELement){
node.classList.add('emoji-image')
}
},

because i want to show the emoji as symbol in text area, and translate it when i posting it.
please refer below screenshot.

really appreciate your help 👍

[omaijdot]

oops, nevermind, it able to translate into the textarea anyway.

Thank you 👍