Search code examples
reactjsemojione

Using EmojiOne With React

I've been trying to use EmojiOne with React.js with the standard .toImage (see docs http:// git.emojione.com/demos/latest/jstoimage.html). Here is what my code looks like, more or less

//react imports
import emoji from 'emojione';
//class component etc. render
return(
//other things from component
    {emoji.toImage(':smile:')}
)

Which gives me

link to image

Here's what it looks like in inspect element:

link to image

So from what I can tell, the emojione library is putting the image code into React as text, rather than as an element. Any idea why?

Thanks!

Solution

  • React is escaping the output from EmojiOne to avoid cross-site scripting attacks. You could (but probably shouldn't...) use dangerouslySetInnerHTML to inject the output from EmojiOne as "actual" HTML.

    Someone has already written a React EmojiOne wrapper that may be useful: https://github.com/pladaria/react-emojione

    For more info on dangerouslySetInnerHTML and why it should be avoided, take a look at: https://facebook.github.io/react/tips/dangerously-set-inner-html.html