Overview 📖

Exactly as this project's name, easy-emoji provide some solutions which displaying a emoji on old system or browser, and it is easy to integrate it to your project. ❤️

😄 If you have curiosities for the compatible problems that some older system or browser cannot display certain emoji, you could read the blog named All about emoji by me.

Usage 🔧

Firstly, ensure that you already installed it on your project, otherwise use the command in your project. 💪

npm i easy-emoji -S

I classify these solutions into three modes which named Image mode, SVG mode, and Font mode, Easy emoji just use the Image mode to help you to do this, And It will support all solutions in the near future. 🏆

Modules

| Name | Type | Default | Description | | :---------------------------: | :-------------------------: | :-----------------------------------------------------------: | :---------------------------------------------------------------------------------- | | emojiData | {Array} | [{ id, name, alias },...] | 877 objects which including the id, name and alias for a emoji in an array. | | getEmojiData | {Function} | getEmojiData([1,2,3]) | Get certain emojis by slice or an array you provided | | findPositionByName | {Function} | findPositionByName("smile") | Find the position of the Sprite by a emoji's name | | getIdByName | {Function} | getIdByName("smile") | Get the emoji's id by its name | | getHTMLTextNodes | {Function} | getHTMLTextNodes("Hi[smile]") | Get the interpreted nodes that help you to recognize which is emojiCode or normal text node | | getCodeByName | {Function} | getCodeByName("smile") | Get the emojiCode which help you to display in a input element | | matchEmojiIndexFromCode | {Function} | matchEmojiIndexFromCode("Where is the [laughing] emoji?") | Querying whether there is an emojiCode in a string that conforms to the rule | |

emojiData

import easyEmoji from "easy-emoji";
const { emojiData } = easyEmoji;
function renderEmojiList() {
	return <ul className={"easy-emoji-list"}>
                {
               	    emojiData.map(({ name, alies, id }) => {
               	    	return  <li
                           key={id}
                           className={"emoji"}
                           data-emoji-name={name}
                           id={`e_${id}`}
                        > </li>
               	    })
               	}
    </ul>
}

😄For above example, apparently we only need the emojiData to map its styles to the element, yeah, it's enough for some simple situations, actually it load a sprites which including 877 emojis and the size is about 2.4MB.

getEmojiData

😺So,if you do not need such much of emojis, you can provide a list indicating what emojis you want to use, This is a example for the situation.

import { getEmojiData }  from "easy-emoji";
const emojiList = getEmojiData(3/*start index*/, 5/*end index*/); // or getEmojiData([3,4]);
// ... Ignoring the process that rendering the emojiList data, the behavior as same as above example.

findPositionByName

Get the position of the Sprite by name.

import {findPositionByName} from "easy-emoji";
findPositionByName("smile");
// [-69, 0]
// [x, y]

So, we can set the background-position to your element, we don't really need this method, we could just use the class emoji and Id e_{emojiId} to an element if these styles has no side-effects for your page.

getHTMLTextNodes

const htmlNodes = getHTMLTextNodes("Wow, [smie][[crescent_moon]I like[smirk][smirk] easy emoji");
// [
//     {text: "Wow, ", cssId: null},
//     {text: null, cssId: "e_2"},
//     {text: "[", cssId: null},
//     {text: null, cssId: "e_301"},
//     {text: "I like", cssId: null},
//     {text: null, cssId: "e_8"},
//     {text: null, cssId: "e_8"},
//     {text: " easy emoji", cssId: null}
// ]

So, below is a example that how to process these Nodes when we received a message.

import { getHTMLTextNodes } from "easy-emoji";

const TextMessage = props => {
  const messageText = props.data.text;
  const htmlNodes = getHTMLTextNodes(messageText);
  return (
    <div className="sc-message--text">
      {htmlNodes.map(({ text, cssId }) => {
        return text ? <span> { text } </span> : (
          <div className={"emoji"} id={cssId} />
        );
      })}
    </div>
  );
};

getCodeByName

import { getCodeByName } from "easy-emoji";
function renderInput() {
	const [inputValue, setInputValue] = useState("");
	const handleChange = () => {
		setInputValue(inputValue)
	}
	const onPickupEmoji = emoji => {
		// the emoji is one of the getEmojiData.
		setInputValue(inputValue + getCodeByName(emoji.name))
	}
	return <div>
	    <input type="text" onChange={handleChange} />
	    <PickupEmojiModal onPickUp={} />
    </div>
}

matchEmojiIndexFromCode

return a list which including all the emojiCode,

import { matchEmojiIndexFromCode } from "easy-emoji";
console.log(matchEmojiIndexFromCode("555[smile]fff[crescent_moon]"));
// ["smile", "crescent_moon"]

getIdByName

Get the emoji's id which represent the id of an object of the emojiData, and you could also to get it manually by the emojiData.