/emoji-picker-textfields-component

React input and textarea components integrated with an Emoji Picker

Primary LanguageJavaScript

React Text field components with emoji picker

Greenkeeper badge

Live demo

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

alt tag

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}/>
}

Note on 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) { ... }

Getting the emoji values

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();

Autoclosing the picker after choosing an emoji:

<EmojiField autoClose={true}/>

alt tag

alt tag

alt tag

alt tag

Attributions

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.

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.