Emojis in picker that don't get rendered by other components

[wgwine]

Apologies, this is more of a question than an issue. Specifically, the picker has an option :upside_down: which is not renderable using either https://github.com/banyan/react-emoji OR https://www.npmjs.com/package/react-emojione

Can I ask what module you use to display emojis on the page with react?

[wgwine]

I would still like to know your answer, but I figured out a solution using the standard emojione package:

const emojione = require("emojione");
const reactStringReplace = require('react-string-replace');
...
function getEmojiHTML(shortname){
  return {__html:emojione.toImage(shortname)}
}

function emojinate(text) { 
  return reactStringReplace(text, /(:[\dA-Za-z\_]+:)/g, (match, i) => (
    <span key={i} dangerouslySetInnerHTML={getEmojiHTML(match)}></span>
  ));
};
...
{emojinate(message.text)}   

[tommoor]

This package is dependent on the standard 'emojione' package - I'm not sure what tweaks the others make - https://github.com/tommoor/emojione-picker/blob/master/package.json#L28.

This is how we render images in the picker, it should be as simple as this:

https://github.com/tommoor/emojione-picker/blob/master/src/emoji.jsx#L21

[wgwine]

@tommoor Thanks! I had seen that file. In my scenario that represents a nasty XSS problem. That's why I added the regex to only do this replacement on the shortname.

[tommoor]

Okay, going to close this question 😄