easy-emoji v1.1.5
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 theemojiCode
,
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
.