Skip to content

elsmr/emoji-pane

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Emoji pane

Dependencies Build Status

An emoji keyboard for React

For an example of the emoji pane in action, go to http://eliasmei.re/emoji-pane/.

emoji-pane demo

Getting started

Installing

npm install emoji-pane

Import component

import EmojiPane from 'emoji-pane';

Import CSS (optional)

If you use Webpack with css loader:

import 'emoji-pane/dist/css/emojiPane.css';

Otherwise import it in your HTML head section.

Example usage

In your react component:

<EmojiPane
    filter="leaf"
    onSelected={logEmoji}
    recents={recents}
    recentsSize={12}
    skinTone={4}
/>

API

EmojiPane

Props

filter {String}

An initial search filter for the emojis.

onSelected([emoji]) {Function}

  • emoji {Object}

This callback gets called when the user selects an emoji.

recents {Array}

An array of emoji objects that were used recently.

recentsSize {Number}

Maximum amount of emojis in the recent section.

skinTone {Number}

A number representing the preferred skin tone.

  • 0: Neutral skin tone
  • 1: Light skin tone (🏻)
  • 2: Medium-light skin tone (🏼)
  • 3: Medium skin tone (🏽)
  • 4: Medium-dark skin tone (🏾)
  • 5: Dark skin tone (🏿)

Development

Clone this repository.

npm install

npm run storybook