Add support for emoji emoticons to your website

Source: Internet
Author: User

    • Project Framework
      • React.js + webpack + ES6 + Jquery
    • Requirements Description
      • Users who use the client often like to send emoji expressions, and when the browser opens the Web version, the emoji expression is not displayed properly. Under Chrome, the emoji expression shows a black and white wireframe expression.
      • It is therefore necessary to implement emoji emoticons support for all browsers through the front end.
    • An attempt at GitHub about emoji's open source solution

Twitter's open source project, Http://, is currently the most widely used, and many other open source solutions are based on it.

Project Home

You can use Twemoji by adding a JS file to the script tag.

The Twemoji.parse function can handle both text (converting emoji code in text to the corresponding IMG tag),

You can also process the DOM (via Document.createdocumentfragment () to convert the emoji code in the existing DOM to an IMG tag and then load it onto the page via Appenchild).

Problem: Twemoji operation on DOM is not suitable for react framework, and can only be executed after window.onload;

The server is abroad, the image of the expression load slow, JS has put on the CDN version will be better.

In the end, I chose Twemoji's scheme of handling text. After that will consider JS to make some changes, JS and emoticons put on the site server to improve the speed of requests.

Add an easy-to-use tutorial


MIT's Open Source project

The same is the JS module, but the expression pack uses a whole large sheet, instead of requesting a single expression separately. The whole piece is really big!

There are several different versions of emoji packs that can switch

Specific use I didn't do much to understand


Https:// Https://

NPM Moudle for the REACT framework

There are two versions of Emoticons pack

When I tried it, I found the following issues:

This module needs to be used with the Mixins attribute of class, and mixins is not supported in ES6 's class notation, so this scenario is discarded.



MIT Productions

This is a NPM that supports react ES6 moudle

Feel this is good, later can be more in-depth understanding and trial

More types of emoji open source projects


There is also a programmer brother himself to apply Twemoji to the REACT scheme

React-easy-emoji Https:// Feel good too

Add support for emoji emoticons to your website

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.