react-simple-emoji

react-simple-emoji

A simple emoji picker component. :wink:

Install

$ npm install react-simple-emoji

How to Use

If you have main component, and you want to add emoji picker:

import React, { Component } from 'react';
import EmojiPicker from 'react-simple-emoji';

export default class App extends Component {
  constructor() {
    super();
    this.state = { text: '', showSelector: false };
    this.handleEmoji = this.handleEmoji.bind(this);
    this.selectEmoji = this.selectEmoji.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  selectEmoji() {
    this.setState({ showSelector: !this.state.showSelector });
  }

  handleInputChange(e) {
    const text = e.target.value;
    this.setState({ text });
  }

  handleKeyDown(e) {
    if (e.keyCode === 13) return this.setState({ text: '' });
  }

  handleEmoji(emojiText) {
    const inpuText = this.state.text;
    this.setState({ text: `${inpuText}:${emojiText}:` });
  }

  render() {
    return (
      <div>
		<input
		  value={this.state.text}
		  type="text"
		  onChange={this.handleInputChange}
		  onKeyDown={this.handleKeyDown}
		/>
		<EmojiPicker
		  show={this.state.showSelector}
		  selector={this.selectEmoji}
		  handleEmoji={this.handleEmoji}
		/>
      </div>
    );
  }
}

API

props

show

Required Type: boolean

Showing emoji picker state.

selector

Required Type: function

Change emoji picker showing state.

handleEmoji

Required Type: function

Handle input text and emoji.

emojiSearchInputStyle

Type: object

Custom your emoji search input style.

selectorStyle

Type: object

Custom your selector box style.

Test

$ npm test

Lint

$ npm run lint

LICENSE

MIT © Peng Jie