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

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:

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.

• Puedes aprender JavaScript en nuestra especialidad de cinco cursos (el primero es gratis).
• Puedes aprender React en nuestro curso React Desde Cero.