node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org ¬Ľ

react-simple-emoji

react-simple-emoji

Build Status Coverage Status Dependency Status

A simple emoji picker component. ūüėČ

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