emoji mart
v5.6.0
Emoji mart é um personalizável
componente HTML emoji Picker para a web
Demonstração 
Trazido a você pela equipe de missivas
Dados
Picker
Componente emoji
Pesquisa sem cabeça
Obtenha dados emoji de nativo
Internacionalização
Exemplos
Construído para navegadores modernos
Desenvolvimento
Os dados necessários para o seletor funcionar foram completamente dissociados da biblioteca. Isso oferece aos desenvolvedores a flexibilidade de controlar melhor o tamanho do pacote de aplicativos e que eles escolham como e quando esses dados são carregados. Os dados podem ser:
Prós: se renderiza instantaneamente, os dados estão disponíveis offline
Contras: Load da página inicial mais lenta (arquivo maior para carregar)
Fio Adicionar @emoji-mart/dados
Importar dados de '@emoji-mart/data'import {picker} de' emoji-mart'new picker ({data})Prós: dados obtidos apenas quando necessário, não afeta o tamanho do seu pacote de aplicativos
Contras: Latência da rede, não funciona offline (a menos que você configure um serviço de serviço)
importar {picker} de 'emoji-mart'new picker ({
Dados: Async () => {const Response = Aguarda Fetch ('https://cdn.jsdelivr.net/npm/@emoji-mart/data'.) Respond.json ()
}})Neste exemplo, os dados são buscados a partir de uma rede de entrega de conteúdo, mas também podem ser buscados a partir de seu próprio domínio se você deseja hospedar os dados.
NPM Install-Save emoji-mart @emoji-mart/data @emoji-mart/react
Importar dados de '@emoji-mart/data'import seletor de'@emoji-mart/react'function app () {
Return (<Data Picker = {Data} OneMojiselect = {Console.log} />
)} <script src = "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browsser.js"> </sCript> <cript>
const pickeroptions = {onemojiselect: console.log}
const picker = new emojimart.picker (pickeroptions)
Document.body.appendChild (Picker) </sCript>| Opção | Padrão | Escolhas | Descrição |
|---|---|---|---|
| dados | {} | Dados a serem usados para o seletor | |
| I18n | {} | Dados de localização a serem usados para o seletor | |
| categorias | [] | frequent , people , nature , foods , activity , places , objects , symbols , flags | Categorias a serem mostradas no seletor. O pedido é respeitado. |
| personalizado | [] | Emojis personalizados | |
| OneMojisElect | null | Retorno de chamada quando um emoji é selecionado | |
| OnClickoutside | null | Retorno de chamada quando um clique fora do seletor acontece | |
| Onaddcustomemoji | null | Retorno de chamada quando o botão Adicionar emoji é clicado. O botão será exibido apenas se esse retorno de chamada for fornecido. É exibido quando a pesquisa não retorna resultados. | |
| foco automático | false | Se o seletor deve se concentrar automaticamente na entrada de pesquisa | |
| categoryicons | {} | Ícones de categoria personalizados | |
| DynamicWidth | false | Se o seletor deve calcular perLine dinamicamente com base na largura de <em-emoji-picker> . Quando ativado, perLine é ignorada | |
| emojibuttonColors | [] | ou seja #f00 , pink , rgba(155,223,88,.7) | Uma variedade de cor que afeta a cor do fundo do pau |
| EmojibuttonRadius | 100% | ou seja, 6px , 1em , 100% | O raio dos botões emoji |
| emojibutTonsize | 36 | O tamanho dos botões emoji | |
| emojisize | 24 | O tamanho dos emojis (dentro dos botões) | |
| emojiversão | 14 | 1 , 2 , 3 , 4 , 5 , 11 , 12 , 12.1 , 13 , 13.1 , 14 | A versão dos dados emoji a serem usados. A versão mais recente suportada em @emoji-mart/data é atualmente 14 |
| ExcetoMojis | [] | Lista de IDs emoji que serão excluídos do seletor | |
| ícones | auto | auto , outline , solid | O tipo de ícones a ser usado para o seletor. outline com tema claro e solid com tema sombrio. |
| localidade | en | en , ar , be , cs , de , es , fa , fi , fr , hi , it , ja , ko , nl , pl , pt , ru , sa , tr , uk , vi , zh | O local para usar para o seletor |
| Maxfrequentrows | 4 | O número máximo de linhas frequentes para mostrar. 0 Desativará a categoria frequente | |
| Navposition | top | top , bottom , none | A posição da barra de navegação |
| nocountryflags | false | Se deve mostrar bandeiras do país ou não. Se não for fornecido, o TBHIS é tratado automaticamente (o Windows não suporta bandeiras de país) | |
| Noresultsemoji | cry | O ID do emoji para usar para os emoji sem resultados | |
| por linha | 9 | O número de emojis para mostrar por linha | |
| Visuewemoji | point_up | O ID do emoji para usar para a pré -visualização quando não está pairando nenhum emoji. point_up quando a posição de visualização é inferior e point_down quando a posição de visualização é superior. | |
| VisuewPosition | bottom | top , bottom , none | A posição da visualização |
| pesquisa | sticky | sticky , static , none | A posição da entrada de pesquisa |
| definir | native | native , apple , facebook , google , twitter | O conjunto de emojis para usar para o seletor. Sendo native mais performante, outros dependem de folhas de sprite. |
| pele | 1 | 1 , 2 , 3 , 4 , 5 , 6 | O tom de pele emojis |
| SkintonePosition | preview | preview , search , none | A posição do seletor de tom de pele |
| tema | auto | auto , light , dark | O tema da cor do seletor |
| getSpriteSheeturl | null | Uma função que retorna o URL da folha de sprites para usar para o seletor. Deve ser compatível com os dados fornecidos. |
Você pode usar emojis personalizados, fornecendo uma variedade de categorias e seus emojis. Os emojis também suportam vários tons de pele e podem ser GIFs ou SVGs.
Importar dados de '@emoji-mart/data'import peganer de'@emoji-mart/react'const personaliza = [
{id: 'github', nome: 'github', emojis: [{id: 'octocat', nome: 'octocat', palavras -chave: ['github'], skins: [{src: './octocat.png' }],}, {id: 'shipit', nome: 'squirrel', palavras-chave: ['github'], skins: [{src: './shipit-1.png'}, {src: './shipit -2.png '}, {src:' ./shipit-3.png '}, {src:' ./shipit-4.png '}, {src:' ./shipit-5.png '}, { src: './shipit-6.png'},],},],
},
{id: 'gifs', nome: 'gifs', emojis: [{id: 'Party_parrot', nome: 'Parrrot da festa', palavras -chave: ['dança', 'dança'], skins: [{src: '. /party_parrot.gif '}],},],,
},] function app () {
return (<dados do selecionador = {data} custom = {personaliza} />
)} Você pode usar ícones de categoria personalizados, fornecendo a um objeto o nome da categoria como chave e o ícone como valor. Atualmente, os formatos suportados são svg String e src . Veja o exemplo.
const CustomCategoryicons = {
categoryicons: {atividade: {svg: '<svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 640 512"> <caminho d = "m57.89 397.2c-6.262- 8.616-16.02-13.19-25.92-13.19c-23.33 0-31.98 20.68-31.98 32.03c0 6.522 1.987 13.1 6.115 18.78l46.52 64c58.89 507.4 68.64 512 78. 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 80S79.91-35.75 79.91-80S540.2 352 4920.91.910.910.20.20.910.2010.93.930.2010.730.20.20.910.20.910.20.910 .34-12.72 -39.2l-23.63-32.5c-13.44-18.5-33.77-27.68-54.12-27.68c-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4 273.4c-24.22 27.88-59.18 63.99- 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 120 60.40 6020202020202020202020202020202020202020202010. ,}, pessoas: {src: './people.png',},
},}O uso de componentes da Web emoji é o mesmo, independentemente da biblioteca que você usa.
Primeiro, você precisa garantir que os dados tenham sido inicializados. Você precisa chamar isso apenas uma vez por página carregar. Observe que, se você ligar para init como este, não precisará necessariamente incluir dados em seus adereços de seletor. Também não doeu, será Noop.
Importar dados de '@emoji-mart/data'import {init} de' emoji-mart'init ({data})Em seguida, você pode usar o componente emoji no seu HTML / JSX.
<EM-EMOJI ID = "+1" size = "2em"> </em-omoji> <em-emoji id = "+1" skin = "2"> </em-omoji> <em-emoji shortcodes = ": +1 :: skin-tone-1:"> </em-omoji> <em-emoji shortcodes = ":+1 :: skin-tone-2:"> </em-omoji>
| Atributo | Exemplo | Descrição |
|---|---|---|
| eu ia | +1 | Um ID emoji |
| códigos de curta duração | :+1::skin-tone-2: | Um código de curto emoji |
| nativo | ? | Um emoji nativo |
| tamanho | 2em | O tamanho do elemento embutido |
| cair pra trás | :shrug: | Uma string a ser renderizada caso o emoji não possa ser encontrado |
| definir | native | O conjunto Emoji: native , apple , facebook , google , twitter |
| pele | 1 | O tom de pele emoji: 1 , 2 , 3 , 4 , 5 , 6 |
Você pode pesquisar sem o seletor. Assim como o componente emoji, data precisam ser inicializados primeiro para usar o índice de pesquisa.
Importar dados de '@emoji-mart/data'import {init, searchIndex} de' emoji-mart'init ({data}) pesquisa de função async (value) {
const emojis = aguarda searchIndex.search (valor)
const Results = emojis.map ((emoji) => {return emoji.skins [0] .nativo
})
console.log (resultados)} pesquisa ('natal') // => ['?', '??', '?' '?', '?', '?', '?', '' ',', '', ' ❄️ ','? ',' ''] Você pode obter dados emoji de um emoji nativo. Isso é útil se você deseja obter o ID emoji de um emoji nativo. Assim como o componente emoji, data precisam ser inicializados primeiro para recuperar os dados emoji.
importar dados de '@emoji-mart/data'import {init, getemojidataFromnative} de' emoji-mart'init ({data}) getemojidatafromnative ('??'). Então (console.log)/* {aliases: [' hand_with_index_and_middle_fingers_crossed '], id:' cruzed_fingers ', palavras -chave: [' mão ',' com ',' index ',' : '??', shortcodes: ': crossed_fingers :: skin-tone-6:', pele: 6, unificado: '1f91e-1f3ff',} */A UI Emojimart suporta vários idiomas, fique à vontade para abrir um PR se o seu estiver faltando.
importar i18n de'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 = 'aucun emoji'new picker ({i18n})Dado o tamanho pequeno do arquivo, o inglês está embutido e não precisa ser fornecido.
Categorias
Fonte emoji personalizada
Estilos personalizados
Componente emoji
Pesquisa sem cabeça
Cores frouxas
Emojimart conta com essas APIs, pode ser necessário incluir poli -preenchimentos se precisar apoiar os navegadores mais antigos:
Shadow Dom (MDN)
Elementos personalizados (MDN)
IntersectionObserver (MDN)
Assíncrono/aguardar (mdn)
Instalação do fio Dev
