Live demo

Companion package to Emoji Picker React. Comes pre-integrated, and bundled with version 1.4.0 of the picker.

npm i emoji-picker-textfield --save

Useage:

import React from 'react';
import EmojiField from 'emoji-picker-textfield';

function inputComponent(props) {
    // you need to explicitly pass 'fieldType="input"'.
    return <EmojiField name="my-input" onChange={props.onChange} fieldType="input"/>
}

function textAreaComponent(props) {
    // defaults to textarea, no need to pass fieldType
    return <EmojiField name="my-textarea" onChange={props.onChange}/>
}

When you onChange function fires, it has the following params (in order):

• event | Event || null - the event triggered by the change. When triggered manually, is set to null
• value | String - the actual value of the text field

onChange(e, value) { ... }

The component exposes the following functions to get the unified value manually: getUnicode: Returns the field value with unicode emoji characters getImages: Returns the field value with html image tags representing the emojis

To gain access to these functions, you need to store the component as a ref:

<EmojiField ref={(_field) => this._field = _field}/>

Then, to call the function, you simply:

const unicodeValue = this._field.getUnicode();
const imagesValue = this._field.getImages();

<EmojiField autoClose={true}/>

You can use this picker, free of charge, no attribution is needed. The emojis have their own license.

All emoji images in this project are the property of the Emojione. Usage of the images is subjeced to their free license.

• Freepik/FlatIcon For the picker-trigger icon.

Other shout-outs:

• iamcal/emoji-data An amazing project, containing emoji data. All the info (names, keywords, etc) in this picker is generated from their data.
• throttle-debounce npm package, used multiple times in the project.
• iconmonstr used for the category icons.
• React Storybook, made building the live demo fast and simple.