emoji mart

Emoji Mart es un personalizable
Componente HTML de Emoji Picker para la web
Manifestación




Traído a usted por el equipo de Missive

Tabla de contenido

• Datos

• Recogedor

• Componente de emoji

• Búsqueda sin cabeza

• Obtenga datos de emoji de nativos

• Internacionalización

• Ejemplos

• Construido para navegadores modernos

• Desarrollo

Datos

Los datos requeridos para que el selector funcione ha sido completamente desacoplado de la biblioteca. Eso brinda a los desarrolladores la flexibilidad de controlar mejor el tamaño de su paquete de aplicaciones y permitirles elegir cómo y cuándo se cargan estos datos. Los datos pueden ser:

Bundled directamente en su base de código

• Pros: Picker Renders instantáneamente, los datos están disponibles fuera de línea

• Contras: carga inicial más lenta (archivo más grande para cargar)

 hilo agregar @emoji-mart/data

 Importar datos de '@emoji-mart/data'Import {picker} desde' emoji-Mart'New Picker ({data})

Observado de forma remota

• Pros: datos obtenidos solo cuando sea necesario, no afecta el tamaño de su paquete de aplicaciones

• Contras: la latencia de la red no funciona fuera de línea (a menos que configure un trabajador del servicio)

 import {picker} de 'emoji-Mart'New Picker ({
  Datos: async () => {const respuesta = a espera fetch ('https://cdn.jsdelivr.net/npm/@emoji-mart/data',) reemburn respuesta.json ()
  }})

En este ejemplo, los datos se obtienen de una red de entrega de contenido, pero también podría obtenerse de su propio dominio si desea alojar los datos.

Recogedor

Reaccionar

 NPM Install-Save emoji-mart @emoji-mart/data @emoji-mart/react

 Importar datos de '@emoji-mart/data'Import Picker desde'@emoji-mart/react'Function app () {
  return (<picker data = {data} oneMoJIselect = {console.log} />
  )}

Navegador

 <script src = "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> </script> <script>
  const pickerOptions = {OneMojiselect: console.log}
  const picker = new EMOJIMART.PICKER (PickerOptions)

  document.body.appendChild (Picker) </script>

Opciones / accesorios

Opción	Por defecto	Opción	Descripción
datos	{}		Datos para usar para el selector
i18n	{}		Datos de localización para usar para el selector
categorías	[]	frequent , people , nature , foods , activity , places , objects , symbols , flags	Categorías para mostrar en el selector. Se respeta el orden.
costumbre	[]		Emojis personalizados
OnemOjiselect	null		Devolución de llamada cuando se selecciona un emoji
OnClickoutside	null		Devolución de llamada cuando ocurre un clic fuera del selector
onaddcustomemoji	null		La devolución de llamada cuando se hace clic en el botón Agregar emoji personalizado . El botón solo se mostrará si se proporciona esta devolución de llamada. Se muestra cuando la búsqueda no devuelve resultados.
enfoque automático	false		Si el selector debe centrarse automáticamente en la entrada de búsqueda
categoryicons	{}		Iconos de categoría personalizados
ancho de dinámica	false		Si el selector debe calcular perLine dinámicamente en función del ancho de <em-emoji-picker> . Cuando está habilitado, se ignora perLine
emojibuttoncolors	[]	es decir #f00 , pink , rgba(155,223,88,.7)	Una variedad de color que afecta el color de fondo flotante
emojibuttonradius	100%	es decir, 6px , 1em , 100%	El radio de los botones emoji
emoJibutStonsize	36		El tamaño de los botones emoji
emodiar	24		El tamaño de los emojis (dentro de los botones)
emojiversión	14	1 , 2 , 3 , 4 , 5 , 11 , 12 , 12.1 , 13 , 13.1 , 14	La versión de los datos de emoji para usar. La última versión compatible con @emoji-mart/data es actualmente 14
excepto	[]		Lista de ID de emoji que serán excluidos del selector
íconos	auto	auto , outline , solid	El tipo de iconos a usar para el selector. outline con un tema claro y solid con un tema oscuro.
lugar	en	en , ar , be , cs , de , es , fa , fi pt fr ru HI, IT tr vi zh KO, uk , PL, PT, RU, sa ko nl , Reino it ja pl , hi	El lugar para usar para el selector
maxfrequentrows	4		El número máximo de filas frecuentes para mostrar. 0 deshabilitará la categoría frecuente
navegación	top	top , bottom , none	La posición de la barra de navegación
nocountryflags	false		Si mostrar banderas de campo o no. Si no se proporciona, TBHIS se maneja automáticamente (Windows no admite banderas de país)
noresultsemoji	cry		La identificación del emoji para usar para el emoji sin resultados
perlanda	9		El número de emojis para mostrar por línea
VieweMoji	point_up		La identificación del emoji para usar para la vista previa cuando no se desplaza a ningún emoji. point_up cuando la posición de vista previa es inferior y point_down cuando la posición de vista previa está arriba.
Vista previa	bottom	top , bottom , none	La posición de la vista previa
posición de búsqueda	sticky	sticky , static , none	La posición de la entrada de búsqueda
colocar	native	native , apple , facebook , google , twitter	El conjunto de emojis para usar para el selector. native , siendo el más activo, otros confían en las hojas de sprits.
piel	1	1 , 2 , 3 , 4 , 5 , 6	El tono de piel emojis
skintonosposition	preview	preview , search , none	La posición del selector de tono de piel
tema	auto	auto , light , dark	El tema del color del selector
getSpritheeturl	null		Una función que devuelve la URL de la hoja de sprits para usar para el selector. Debe ser compatible con los datos proporcionados.

Emojis personalizados

Puede usar emojis personalizados proporcionando una variedad de categorías y sus emojis. Los emojis también admiten múltiples tonos de piel y pueden ser GIF o SVG.

 Importar datos de '@emoji-mart/data'Import Picker desde'@emoji-mart/react'const custom = [[
  {id: 'github', nombre: 'github', emOJis: [{id: 'octocat', nombre: 'octocat', palabras clave: ['github'], skins: [{src: './octocat.png' }],}, {id: 'shipit', nombre: 'ardilla', palabras clave: ['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', nombre: 'gifs', emOJis: [{id: 'Party_Prot', Name: 'Party Parrot', Palabras clave: ['Dance', 'Dancing'], Skins: [{src: '. /party_parrot.gif '}],},],
  },] función app () {
  return (<picker data = {data} custom = {Custom} />
  )}

Iconos de categoría personalizados

Puede usar iconos de categoría personalizados proporcionando un objeto con el nombre de la categoría como clave y el icono como valor. Los formatos compatibles actualmente son svg String y src . Ver ejemplo.

 const customCategoryicons = {
  Categyicons: {Activity: {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. 3C0-6.522-1.988 -13.1-6.115-18. .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-3-3-7c630.5 140.4 640 120 640 99.38z "/> <</svgg> </svgg> ' ,}, People: {src: './people.png',},
  },}

Componente de emoji

El uso del componente web de emoji es el mismo sin importar qué biblioteca use.

Primero, debe asegurarse de que los datos se hayan inicializado. Debe llamar a esto solo una vez por carga. Tenga en cuenta que si llama init de esta manera, no necesariamente necesita incluir datos en sus accesorios de selección. Tampoco duele, nop.

 Importar datos de '@emoji-mart/data'Import {init} de' emoji-mart'Init ({data})

Luego puede usar el componente emoji en su 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>

Atributos / accesorios

Atributo	Ejemplo	Descripción
identificación	+1	Una identificación de emoji
códigos cortos	:+1::skin-tone-2:	Un código corto de emoji
nativo	?	Un emoji nativo
tamaño	2em	El tamaño del elemento en línea
retroceder	:shrug:	Una cadena a renderizar en caso de que el emoji no se pueda encontrar
colocar	native	El conjunto de emoji: native , apple , facebook , google , twitter
piel	1	El tono de piel emoji: 1 , 2 , 3 , 4 , 5 , 6

Búsqueda sin cabeza

Puedes buscar sin el selector. Al igual que el componente emoji, data deben inicializarse primero para usar el índice de búsqueda.

 Importar datos de '@emoji-mart/data'Import {init, searchIndex} desde' emoji-Mart'Init ({data}) Async Function Search (valor) {
  const emojis = ALEA SearchIndex.Search (valor)
  Const Results = emojis.map ((emOJi) => {return emoji.skins [0] .native
  })

  console.log (resultados)} búsqueda ('Navidad') // => ['?', '??' ','? ‍? ','? ','? ','? ',' ☃️ ',' ❄️ ','? ',' ⛄ ']

Obtenga datos de emoji de nativos

Puedes obtener datos de emoji de un emoji nativo. Esto es útil si quieres obtener la identificación de emoji de un emoji nativo. Al igual que el componente emoji, data deben inicializarse primero para recuperar los datos de emoji.

 Importar datos de '@emoji-mart/data'Import {init, getemoJidataFromnative} de' emOJi-Mart'Init ({data}) getemOJidataFromnative ('??'). Entonces (console.log)/* {aliases: ['' Hand_with_index_and_middle_fingers_crossed '], id:' Crossed_fingers ', Palabras clave: [' Hand ',' con ',' índice ',' y ',' Middle ',' Good ',' Lucky '], Nombre:' Fingers cruzados ', nativo, nativo, nativo, nativo : '?

Internacionalización

Emojimart UI admite múltiples idiomas, no dude en abrir un PR si falta el suyo.

 import i18n de'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 = 'aucun emoji'new picker ({i18n})

Dado el pequeño tamaño del archivo, el inglés está incorporado y no es necesario proporcionar.

Ejemplos

• Categorías

• Fuente de emoji personalizada

• Estilos personalizados

• Componente de emoji

• Búsqueda sin cabeza

• Colores flojos

Construido para navegadores modernos

Emojimart se basa en estas API, es posible que deba incluir polyfills si necesita admitir navegadores más antiguos:

• Shadow Dom (MDN)

• Elementos personalizados (MDN)

• IntersectionObServer (MDN)

• Async/Await (MDN)

Desarrollo

 instalación de hilo
hilado