React Text field components with emoji picker
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}/>
}
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}/>
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.
- 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.