Emoji.module NPM

Emojis Module

A simple to use Emoji's Module that can be used for any Javascript project. Using React as the framework with the use of Ant Design, you can use this module to display a wide variety of sorted emojis'. Users' can also search for any particular emoji with the emoji search bar.

Here's an example where I utilized my Emoji Module for my messaging app Universal Chat

Universal Chat

Background

While developing a passion project of mine, I came to a roadblock where I wanted to implement emoji's to my messaging app but couldn't find an easier way to display all the emoji's and have it categorized by groups. Searching for days I couldn't find the perfect module so I decided to make my own. I gather all the emojis and created a JSON file to store each character and title of the emoji and group them together by the type of emoji it belong to. With the use of React and Ant.Design I created a module that can be implemented in any Javascript project built on React Framework. Very simple to install and used.

Features

You can search for any emoji simply by typing the name of the emoji.

A Wide Variety of Emojis All Categorized

fig .3

fig .4

fig .5

Install

You Must Have React Installed $ npm install react

After Installing React $ npm install emoji.module

Usage

You must first import the component from the file Import { Emojis } from 'emojiModule' Then you can use the Emojis component anywhere the developer chooses

Import React, {Component} from 'react'
Import { Emojis } from 'emojiModule'

class Example from Components{
render(){
    <div>
    <Emojis />
    </div>
}
}

Passing Props

To retrieve the emoji the user selected, the developer MUST pass a function as a prop. The function needs to take in an argument that will be assign to the emoji selected and within the function a state or a variable must be set to hold the value. Once function has been created pass the function the prop named getEmoji

Import React, {Component} from 'react'
Import { Emojis } from 'emojiModule'

class Example extends Components {
    
    state = {
        emoji: null
    }

//This Function is going to be passed as a prop

emojiSelected = value => {
    this.setState({
        emoji: value
    })
}


render(){
    const { emojiSelected } = this
    return (
        <div>
        <Emoji getEmoji={emojiSelected}>
        </div>
    )
} 
}

Props

Property	Description	Type	Default
getEmoji	Use to get the emoji user selected	function	-
useDefaultStyle	Default Style	boolean	true
eClass	Class name for the emoji search bar	string	-
eStyle	Custom style for emoji search bar	object	-

Below Are Ant.Design props used for this project please visit Ant.Design for more amazing styling components

Property	Description	Type	Default
overlayStyle	Style of the tooltip card	object	-
trigger	Tooltip trigger mode	`hover` `focus` `click` `contextMenu`	`click`
placement	The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`	string	topRight
overlayClass	Class name of the tooltip card	string	-
autoAdjustOverflow	Whether to adjust popup placement automatically when popup is off screen	boolean	true
arrowPointAtCenter	Whether the arrow is pointed at the center of target, supported after antd@1.11+	boolean	false