emoji mart
v5.6.0
Emoji Mart est un personnalisable
Composant HTML Picker Emoji Picker pour le Web
Démo 
Vous a apporté par l'équipe de missive
Données
Cueilleur
Composant emoji
Recherche sans tête
Obtenez les données des emoji de Native
Internationalisation
Exemples
Construit pour les navigateurs modernes
Développement
Les données requises pour que le sélecteur fonctionnent a été complètement découplée de la bibliothèque. Cela donne aux développeurs la flexibilité pour mieux contrôler la taille de leur bundle d'applications et leur laisser choisir comment et quand ces données sont chargées. Les données peuvent être:
Points positifs: Picker rend instantanément, les données sont disponibles hors ligne
Inconvénients: chargement de page initial plus lent (fichier plus grand à charger)
yarn add @ emoji-mart / data
Importez des données à partir de '@ emoji-mart / data'import {Picker} de' emoji-Mart'new Picker ({data})Avantages: données obtenues uniquement si nécessaire, n'affecte pas la taille de votre bundle d'applications
Inconvénients: latence du réseau, ne fonctionne pas hors ligne (sauf si vous configurez un travailleur-service)
Import {Picker} de 'Emoji-Mart'new Picker ({
Données: Async () => {const Response = Await Fetch ('https://cdn.jsdelivr.net/npm/@emoji-mart/data' ,,)return réponse.json ()
}})Dans cet exemple, les données sont récupérées à partir d'un réseau de livraison de contenu, mais elles peuvent également être récupérées à partir de votre propre domaine si vous souhaitez héberger les données.
Installation NPM - Save Emoji-Mart @ emoji-Mart / Data @ emoji-Mart / React
Importez des données à partir de '@ emoji-Mart / Data'Import Picker de' @ emoji-Mart / React'Function App () {{
return (<picker data = {data} onmojiselect = {console.log} />
)} <script src = "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> </ script> <cript>
const pickerOROPTIONS = {OneMoJiselect: Console.log}
const Picker = new emojimart.picker (PickeroPtions)
document.body.appendChild (Picker) </cript>| Option | Défaut | Choix | Description |
|---|---|---|---|
| données | {} | Données à utiliser pour le cueilleur | |
| i18n | {} | Données de localisation à utiliser pour le sélectionneur | |
| catégories | [] | frequent , people , nature , foods , activity , places , objects , symbols , flags | Catégories à montrer dans le cueilleur. L'ordre est respecté. |
| coutume | [] | Emojis personnalisés | |
| onémojiselect | null | Rappel lorsqu'un emoji est sélectionné | |
| onclickoutside | null | Rappel lorsqu'un clic à l'extérieur du sélecteur se produit | |
| onddcustomemoji | null | Rappel lorsque le bouton Emoji Ajouter un ajout est cliqué. Le bouton ne sera affiché que si ce rappel est fourni. Il s'affiche lorsque la recherche ne renvoie aucun résultat. | |
| autofocus | false | Si le sélecteur doit se concentrer automatiquement sur l'entrée de recherche | |
| catégories | {} | Icônes de catégorie personnalisées | |
| dynamicwidth | false | Si le sélecteur doit calculer perLine dynamiquement en fonction de la largeur de <em-emoji-picker> . Lorsqu'il est activé, perLine est ignorée | |
| emojuttoncolors | [] | IE #f00 , pink , rgba(155,223,88,.7) | Un tableau de couleur qui affecte la couleur de fond de survol |
| emojuttonradius | 100% | c'est-à-dire 6px , 1em , 100% | Le rayon des boutons emoji |
| émojutTonize | 36 | La taille des boutons emoji | |
| émojistez | 24 | La taille des emojis (à l'intérieur des boutons) | |
| emojiversion | 14 | 1 , 2 , 3 , 4 , 5 , 11 , 12 , 12.1 , 13 , 13.1 , 14 | La version des données des emoji à utiliser. La dernière version prise en charge dans @emoji-mart/data est actuellement 14 |
| excepteur | [] | Liste des identifiants emoji qui seront exclus du cueilleur | |
| icônes | auto | auto , outline , solid | Le type d'icônes à utiliser pour le sélecteur. outline avec un thème clair et solid avec un thème sombre. |
| lieu | en | en , ar , be , cs , de , es , fa , fi , fr , hi , it , ja , ko , nl , pl , pt , ru , sa , tr , uk , vi , zh | Le lieu à utiliser pour le cueilleur |
| maxfregrentrow | 4 | Le nombre maximal de lignes fréquentes à montrer. 0 désactivera la catégorie fréquente | |
| poste de navigation | top | top , bottom , none | La position de la barre de navigation |
| nocountryflags | false | Que ce soit pour montrer des drapeaux country ou non. S'il n'est pas fourni, TBHIS est géré automatiquement (Windows ne prend pas en charge les drapeaux de pays) | |
| noresultation | cry | L'ID des emoji à utiliser pour les emoji sans résultats | |
| perline | 9 | Le nombre d'émojis à montrer par ligne | |
| préviewemoji | point_up | L'ID des emoji à utiliser pour l'aperçu lorsqu'il ne plane aucun emoji. point_up lorsque la position de prévisualisation est inférieure et point_down lorsque la position de prévisualisation est en haut. | |
| prévisualisation | bottom | top , bottom , none | La position de l'aperçu |
| position de recherche | sticky | sticky , static , none | La position de l'entrée de recherche |
| ensemble | native | native , apple , facebook , google , twitter | L'ensemble des emojis à utiliser pour le sélecteur. native étant la plus performante, d'autres comptent sur des spritesheets. |
| peau | 1 | 1 , 2 , 3 , 4 , 5 , 6 | Le teint des emojis |
| SkinToEposition | preview | preview , search , none | La position du sélecteur de teint |
| thème | auto | auto , light , dark | Le thème de la couleur du cueilleur |
| getPriteSetUrl | null | Une fonction qui renvoie l'URL de la feuille de Sprite à utiliser pour le sélecteur. Il doit être compatible avec les données fournies. |
Vous pouvez utiliser des emojis personnalisés en fournissant une gamme de catégories et leurs emojis. Les emojis prennent également en charge plusieurs tons de peau et peuvent être des GIF ou des SVG.
Importez des données à partir de '@ emoji-Mart / Data'Import Picker de' @ emoji-Mart / react'Const Custom = [
{id: 'github', name: 'github', emojis: [{id: 'octocat', name: 'octocat', mots clés: ['github'], skins: [{src: './octocat.png' }],}, {id: 'shitit', name: 'squirrel', mots clés: ['github'], skins: [{src: './shitit-1.png'}, {src: './shipit -20 src: './shipit-6.png'},],},],
},
{id: 'gifs', name: 'gifs', emojis: [{id: 'Party_parrot', nom: 'Party Parrot', mots clés: ['danse', 'Dancing'], Skins: [{src: '. /party_parrot.gif '}],},],
},] fonction app () {
return (<picker data = {data} coustom = {coustom} />
)} Vous pouvez utiliser des icônes de catégorie personnalisées en fournissant un objet avec le nom de catégorie comme clé et l'icône comme valeur. Les formats actuellement pris en charge sont svg String et src . Voir l'exemple.
const CustomCategoryicons = {
catégoriesicons: {activité: {svg: '<svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 640 512"> <path d = "M57.89 397.2c-6.262- 8.616-16.02-13.19-25.92-13 3C0-6.522-1.988 -13.1-6.115-18.78L57.89 397.2ZM496.1 352C-44.13 0-79.72 35.75-79.72 80S35.59 80 79,72 80999 .34-12.72 -39.2L-23.63-32.5c -3.44-18.5-33.77-27.68-54.12-27.68c-3.89 0-27.79 4.281-39.51 12.8l307.8 159.7c262.2 192.8 220.4 230.9.4 273.4C-24.22227.88-59.18 63,999 103.5 99.63L56.34 77.52C53.79-35.39 99.15-55.3 127.1-67.27C51.88-22 101.3-49.87 146.9-82.1l202.3-146.7c630.5 140.4 640 120 640 ,}, les gens: {src: './people.png',},
},}L'utilisation des composants Web Emoji est la même, quelle que soit la bibliothèque que vous utilisez.
Tout d'abord, vous devez vous assurer que les données ont été initialisées. Vous devez appeler cela une seule fois par page de charge. Notez que si vous appelez init comme celui-ci, vous n'avez pas nécessairement besoin d'inclure des données dans vos accessoires de sélecteur. Cela ne fait pas de mal non plus, il sera NOOP.
Importez des données à partir de '@ emoji-mart / data'import {init} de' emoji-Mart'init ({data})Ensuite, vous pouvez utiliser le composant Emoji dans votre HTML / JSX.
<em-emoji id = "+ 1" size = "2em"> </em-emoji> <em-emoji id = "+ 1" skin = "2"> </em-emoji> <em-emoji shortcodes = ": +1 :: Skin-Tone-1:"> </em-emoji> <em-emoji shortcodes = ": + 1 :: skin-tone-2:"> </em-emoji>
| Attribut | Exemple | Description |
|---|---|---|
| identifiant | +1 | Un identifiant emoji |
| shortcodes | :+1::skin-tone-2: | Un raccourci emoji |
| indigène | ? | Un emoji indigène |
| taille | 2em | La taille de l'élément en ligne |
| retomber | :shrug: | Une chaîne à rendre au cas où les emoji ne peuvent pas être trouvés |
| ensemble | native | L'ensemble des emoji: native , apple , facebook , google , twitter |
| peau | 1 | Le teint emoji: 1 , 2 , 3 , 4 , 5 , 6 |
Vous pouvez rechercher sans le cueilleur. Tout comme le composant Emoji, data doivent être initialisées en premier afin d'utiliser l'index de recherche.
Importez des données à partir de '@ emoji-mart / data'import {init, searchindex} de' emoji-Mart'init ({data}) Fonction Async Search (valeur) {
const emojis = attendre searchindex.search (valeur)
const de constants = emojis.map ((emoji) => {return emoji.skins [0] .Native
})
console.log (résultats)} search ('Noël') // => ['?', '??', '? ?', '?', '?', '?', '☃️', ' ❄️ ','? ',' ⛄ '] Vous pouvez obtenir des données emoji à partir d'un emoji natif. Ceci est utile si vous souhaitez obtenir l'identification des emoji d'un emoji natif. Tout comme le composant Emoji, data doivent être initialisées en premier afin de récupérer les données des emoji.
Importez des données de '@ emoji-Mart / Data'Import {init, getEmojidatafromnative} de' emoji-Mart'init ({data}) getEmojidatafromnative ('??'). puis (console.log) / * {aliases: [' hand_with_index_and_middle_fingers_crossed '], id: `` croided_fingers', mots clés: ['hand', 'with', 'index', 'et', 'middle', 'good', 'Lucky'], name: 'Crossed Fingers', natif : '??', Shortcodes: ': Crossed_Fingers :: Skin-Tone-6:', Skin: 6, Unified: '1f91e-1f3ff',} * /Emojimart UI prend en charge plusieurs langues, n'hésitez pas à ouvrir un PR si le vôtre est manquant.
Import i18n de'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 = 'AUCUN Emoji'new Picker ({i18n})Compte tenu de la petite taille de fichier, l'anglais est intégré et n'a pas besoin d'être fourni.
Catégories
Police emoji personnalisée
Styles personnalisés
Composant emoji
Recherche sans tête
Couleurs moulées
Emojimart s'appuie sur ces API, vous devrez peut-être inclure des polyfills si vous avez besoin de prendre en charge les navigateurs plus âgés:
Shadow Dom (MDN)
Éléments personnalisés (MDN)
IntersectionObserver (MDN)
Async / Await (MDN)
Installation du fil chou
