react-emoji-selector

A React tool to select Emojis.

Demo

Live demo

Quick Start

Installation

Install react-emoji-selector using npm

npm install --save react-emoji-selector

Usage

Import the component and stylesheet:

import ReactEmojiSelector from 'react-emoji-selector'
import 'react-emoji-selector/lib/react-emoji-selector.css'

Use the component:

class MyComponent extends React.Component {
 
  selectEmoji(emoji) {
    this.setState({emoji}) // {emoji: "🚀", key: "rocket"}
  }
 
  render() {
    return (
      <ReactEmojiSelector
                visibleAmount={10}
                searchPlaceholder='Search emoji'
                onSelect={(emoji) => this.selectEmoji(emoji)}/>
    )
  }
}

Props

Component props:

Prop	Default	Type	Description
visibleAmount	78	int	Amount of emojis shown before Show-more button is pressed
searchPlaceholder	Search	string	Placeholder text for search input
showMoreButtonText	Show more	string	'Show more' button text
onSelect	-	func	Callback function called after selecting an emoji