[react-markdown] How do I render emoji in react-markdown 6?

[rossng]

I'm looking at updating react-markdown in our project from 5.0.3 to 6.0.2.

We use it to render user-submitted Markdown, and it's important for our project that we can render emoji consistently. We use the react-emoji-render package to do that. It's very simple - you simply pass a string of text to it and it replaces raw unicode emoji with an image. It can also detect and replace sequences like :) or :+1:.

The code is open source, and you can find it here.

This worked great with the previous version of react-markdown - we just used the text renderer to process each piece of text. However, version 6 has removed that option and it's not clear how to achieve the same effect now. I'm happy to do some hacking to make this work, but I would really appreciate a steer in the right direction from someone who is more familiar with the Markdown processing ecosystem!

[wooorm]

There are several solutions:

• https://github.com/florianeckerstorfer/remark-a11y-emoji
• https://github.com/remarkjs/remark-gemoji
• https://github.com/jackycute/remark-gemoji-to-emoji
• ...and some more!

[rossng]

My idea so far is that I will use use remark-emoticons to convert ASCII emoticons to unicode emoji, then use remark-twemoji to convert unicode emoji to actual Twemoji images.

I'll post an update once I've had a go 🙂

[ChristianMurphy]

A heads up on remark-emoticons, it may not work with react-markdown 6 yet, there is an open issue at the project to resolve this zestedesavoir/zmarkdown#416