README
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
.