Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Cómo agregar emojis a tu App con React.js

Te contaré cómo implementamos un selector de emojis en el chat de nuestra aplicación de cursos. Es muy fácil.

Como agregar emojis a tu chat

Hace poco en EDteam implementamos la funcionalidad de seleccionar emojis en el chat de nuestra aplicación de cursos, como lo puedes ver a continuación:

Emojis

Y en este artículo voy explicarte como lo hicimos. Es más fácil de lo que crees.

Paquete emoji-picker-react

Ya que nuestra aplicación está desarrollada con la librería React, se usó el paquete emoji-picker-react el cual nos brinda una serie de funcionalidades para personalizar este picker según tus necesidades.

Este componente se instala en cualquier proyecto React usando el siguiente comando:

yarn add emoji-picker-react

O si usas npm:

npm i emoji-picker-react --save

Despues de instalar el componente, su forma más sencilla de uso es la siguiente:

import React, {Component} from 'react';
import EmojiPicker from 'emoji-picker-react';
 
class Chat extends Component {
 
    render() {
        return (
            <EmojiPicker onEmojiClick={myCallback}/>
        );
    }
}

En este código estamos importando el componente y lo estamos renderizando en nuestro componente Chat y como podemos ver este componente tiene el evento onEmojiClick el cual es ejecutado en el momento que el usuario le da click en alguno de los emojis que hay en el picker, este evento me brinda información muy importante para poder renderizar de manera adecuada este emoji en el input del chat.

myCallback(code) {
    const emoji = String.fromCodePoint(`0x${code}`)
    myInput.value += ` ${emoji}`
}

En este código estoy definiendo el método que se ejecutara en el momento que un usuario de click en alguno de los emojis, este evento me estara devolviendo un code que es un unicode (ya que los emojis son caracteres unicode). Después, dentro de la variable emoji transformo este unicode en el emoji que veras en el input usando el método fromCodePoint()  de la clase String de Javascript y por último simplemente concateno este emoji en el value de mi input.

Ya el código completo se vería algo asi:

import React, {Component} from 'react';
import EmojiPicker from 'emoji-picker-react';
 
class Chat extends Component {
    myCallback(code) {
        const emoji = String.fromCodePoint(`0x${code}`)
        myInput.value += ` ${emoji}`
    }
    render() {
        return (
            <EmojiPicker onEmojiClick={myCallback}/>
        );
    }
}

Como puedes ver implementar este picker fue realmente sencillo gracias a este maravilloso componente, espero que lo puedas usar en alguno de tus proyectos, hasta la próxima.


Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal