React-markdown: How to display emoji?

[joelin109]

it can not be displayed correctly when the source including emoji like ":sparkles::turtle::rocket::sparkles:".

How to display them correct?

[rexxars]

I... don't actually know! I guess you might replace strings like :turtle: with a markdown image tag?

var input = 'Teenage mutant ninja :turtle: - Heroes in a half shell'
var emojified = input.replace(/:(\w+):/g, '![:$1:](http://some.emoji.host/$1.png)')

ReactDOM.render(<Markdown source={emojified} />, document.getElementById('root'))

[Errorname]

There could be a better way to add emojis:

First, it needs to allow text renderers (PR incoming)

Then, add a renderer in your project which matches and replaces :emojis: to their unicode counterparts

import emoji from 'emoji-dictionary'

...

const emojiSupport = text => text.value.replace(/:\w+:/gi, name => emoji.getUnicode(name))

<ReactMarkdown source="Hi! :smiley:" renderers={{ text: emojiSupport }}/>
// "Hi! 😃"

emojiSupport could also be enhanced to convert emoticons (:),:D,...) to emojis

To conclude, we just need to allow text renderers in react-markdown to make this possible 🙂

Edit: Use text.value instead of text as pointed out by @PiyushPawar17

[PiyushPawar17]

@Errorname The above code gives the following error text.replace is not a function.
I think this might be because renderers give you

{
    "nodeKey": "some-key",
    "children": "children",
    "value": "value"
}

And text.replace() is trying to replace the object. This worked for me.

const emojiSupport = text => text.value.replace(/:\w+:/gi, name => emoji.getUnicode(name));