javascriptreactjsmarkdownemojione

How to combine emojione with markdown in React?


Right now I am trying to parse some text with both react-emojify and react-markdown. I would like to combine somehow the functionality of both utilities.

Problem is (if I understand correctly) that both convert string into React DOM. When I run emojify on content the result cannot be passed into <ReactMarkdown source={result} /> and vice versa.

I was thinking about doing sth like serializing React DOM into HTML and allowing some tags in the other parser, but both have rather limited options when it comes to making them compatible (e.g. emojify spits emoticons as spans which cannot be allowed in ReactMarkdown).

Have anyone else tried that? Is there some way (even by changing libraries) that could help me achieve this?


Solution

  • I managed to make things work by replacing react-emojify with emojione:

    import emojione from 'emojione';
    import React from 'react';
    import ReactMarkdown from 'react-markdown';
    
    class ExampleComponent extends React.Component {
      render() {
        const content = this.props.content;
        const emojified = emojione.shortnameToImage(content);
        return (
          <ReactMarkdown source={emojified} />
        );
      }
    }
    

    Later on I only had to tweak how emojis are shown by changing .emojione class properties in CSS (as opposed to passing option object into react-emojify function).