[Solved]-How to implement react with on type (realtime) emojis?-Reactjs

here is a nice way to make a contenteditable div with html and onchange props. i used that with emojione's shortnametoimage function.

here is a working codepen

the styles can be added to contenteditable props if you want them to come from the state

the only thing that needs to be fixed is the caret position after an emoji is added.

class application extends react.component {
  state = {
    value: "start writing here"
  };

  render() {
    return (
      <contenteditable
        html={emojione.shortnametoimage(this.state.value)}
        onchange={this._onchange}
      />
    );
  }

  _onchange = e => {
    this.setstate({ value: e.target.value });
  };
}

var contenteditable = react.createclass({
  render: function() {
    return (
      <div
        contenteditable
        classname="message-input"
        oninput={this.emitchange}
        onblur={this.emitchange}
        dangerouslysetinnerhtml={{ __html: this.props.html }}
      />
    );
  },

  shouldcomponentupdate: function(nextprops) {
    return nextprops.html !== this.getdomnode().innerhtml;
  },

  componentdidupdate: function() {
    if (this.props.html !== this.getdomnode().innerhtml) {
      this.getdomnode().innerhtml = this.props.html;
    }
  },

  emitchange: function() {
    var html = this.getdomnode().innerhtml;

    if (this.props.onchange && html !== this.lasthtml) {
      this.props.onchange({ target: { value: html } });
    }

    this.lasthtml = html;
  }
});

react.render(<application />, document.getelementbyid("app"));

html, body {
  height: 100%
}

.message-input {
  width: 100%;
  height: 100%;
  font-size: 30px;
}

.emojione {
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<div id="app"></div>

i have used emojione and this code snippet to basically come up with a very non-react solution as shown below. hope it helps.

import react from 'react';
import {render} from 'react-dom';
import emojione from 'emojione';

class app extends react.component {

    constructor(props) {
        super(props);
    }

    updatetext = () => {
        const html = emojione.shortnametoimage(this.refs.inputdiv.innerhtml);
        let sel, range;

        if (window.getselection) {
            // ie9 and non-ie
            sel = window.getselection();

            if (sel.getrangeat && sel.rangecount) {
                range = sel.getrangeat(0);
                range.deletecontents();

                // range.createcontextualfragment() would be useful here but is
                // non-standard and not supported in all browsers (ie9, for one)
                let el = this.refs.inputdiv;
                el.innerhtml = html;
                let frag = document.createdocumentfragment(), node, lastnode;

                while ((node = el.firstchild)) {
                    lastnode = frag.appendchild(node);
                }
                range.insertnode(frag);

                // preserve the selection
                if (lastnode) {
                    range = range.clonerange();
                    range.setstartafter(lastnode);
                    range.collapse(true);
                    sel.removeallranges();
                    sel.addrange(range);
                }
            }
        } else if (document.selection && document.selection.type !== "control") {
            // ie < 9
            document.selection.createrange().pastehtml(html);
        }
    };


    render() {
        return (
            <div ref="inputdiv" contenteditable oninput={this.updatetext}/>
        );
    }

}

render(<app/>, document.getelementbyid('root'));

here is the working example https://codesandbox.io/s/ol2lmkqqlq