@jadbalout/react-emoji-picker v1.0.1
@jadbalout/react-emoji-picker
Modern Emoji Picker Component in React
Installation
npm install --save @jadbalout/react-emoji-picker
Usage
import React, { useState } from "react";
import { EmojiPicker, emojify, wrapEmoji, simplifyEmojis } from "@jadbalout/react-emoji-picker";
const emojiGroups = {
"Group Name": {
"Emoji1": { url: "https://cdn.discordapp.com/emojis/396521732086693888.png", "aliases": [] },
}
}
const simplifiedEmojis = simplifyEmojis(emojiGroups); //to speed up unwrapping
const App = () => {
const [output, updateOutput] = useState("");
const onEmojiSelected = function(name: string) {
updateOutput(`${output}${wrapEmoji(name)} `);
}
return (
<>
<p>Output: { output }</p>
<p>Unwrapped Output: { emojify(simplifiedEmojis, output) }</p>
<EmojiPicker emojiByGroup={emojiGroups} onEmojiSelected={onEmojiSelected} />
</>
)
}
Documentation
Accepted Props
Name | Type | Default Value | Required? | Description |
---|---|---|---|---|
emojiByGroup | IEmojiGroup | undefined | Yes | Object containing data about groups and their emojis to be displayed. |
onEmojiSelected | Function | undefined | Yes | Callback to run when clicking an emoji. |
className | String | null | No | Custom class to replace CSS variables or override emojiContainer class declarations. |
emojiByGroup
emojiByGroup
example structure:
const emojiGroups = {
"Group Name": {
"Emoji1": { url: "https://cdn.discordapp.com/emojis/396521732086693888.png", "aliases": ['alias1'] },
//more objects with emoji name as key
},
//... more objects with group name as key
}
aliases
is not mandatory property but will be taken into consideration during search functionality and emoji unwrapping.
onEmojiSelected
onEmojiSelected
is the function called when an emoji is clicked. It must take an argument of type string
which is the name of the emoji clicked.
className
className
is used to replace default CSS variables used or to override emojiContainer class declarations.
The following CSS variables exist:
Name | Default Value |
---|---|
--emoji-picker-bg-color | hsl(220, 22%, 12%) |
--emoji-picker-label-color | hsl(220, 22%, 70%) |
--emoji-picker-emoji-hover-color | hsla(220, 100%, 82%, 0.13); |
--emoji-picker-input-bg-color | hsl(220, 22%, 16%) |
--emoji-picker-input-bg-hover-color | hsl(220, 22%, 37%) |
--emoji-picker-border | 1px solid hsl(220, 22%, 25%); |
Helper functions
Helper functions are used to wrap and unwrap emojis.
simplifyEmojis
simplifyEmojis
takes your emojiByGroup
variable as a parameter and simplifies it into a simple emoji object mapped only by emoji name to be used by the unwrapper. It is better to use it once only at the start of your code to avoid iterating over the entire object everytime unwrapping is needed.
wrapEmoji
wrapEmoji
is used to wrap your emoji between delimeters and it takes two parameters. The first parameter is the emoji name which is required. The second parameter which is not required is the delimeter. The default value for the delimeter is :
. wrapEmoji
returns the altered wrapped emoji name.
emojify
emojify
is used to unwrap the wrapped message and it takes three possible parameter. The first parameter is required and is a simplified emojis object obtained by using simplifyEmojis
. The second parameter is the string to unwrap. The last parameter is not required and it is the delimeter used to wrap the emoji. The default value for the delimeter is :
. emojify
returns the unwrapped message (type: string
).