npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tleunen/react-emoji-picker

v1.0.2

Published

A React component providing a visual emoji picker, similar to Slack's

Downloads

45

Readme

react-emoji-picker

Thanks to the awesome work of @banyan on react-emoji, it's easy to turn user-generated boring-old plain text like :laughing: into super sweet emojis like

But how do you introduce emoji n00bs to this brave new world of named emojis?

With react-emoji-picker!

react-emoji-picker allows you to create a very customizable Slack-like emoji picker in your own user interfaces. It looks a little something like this:

How to use

If you want an emoji picker that looks like the above, first install this package using npm i -S react-emoji-picker, and then here's some code you can write to get you to a good starting point:

var React = require('react');
var EmojiPicker = require('emoji-picker');
var emojiMap require('react-emoji-picker/lib/emojiMap');

// styles for the emoji picker wrapper
var emojiPickerStyles = {
  position: 'absolute',
  left: 0, top: '3.9rem',
  backgroundColor: 'white',
  width: '100%',
  padding: '.3em .6em',
  border: '1px solid #0074d9',
  borderTop: 'none',
  zIndex: '2'
};

var MyEmojiInput = React.createClass({
  getInitialState: function() {
    return {
      emoji: null,
      showEmojiPicker: false,
    }
  },

  componentDidMount: function() {
    document.addEventListener('click', this.toggleEmojiPicker, false)
  },

  componentWillUnmount: function() {
    document.removeEventListener('click', this.toggleEmojiPicker, false)
  },

  toggleEmojiPicker: function(e) {
    if(this.refs.emoji.contains(e.target)) {
      this.setState({showEmojiPicker: true});
    } else {
      setTimeout(this.validateEmoji, 10)
      this.setState({showEmojiPicker: false});
    }
  },

  validateEmoji: function() {
    var matched = emojiMap.filter(function(emoji) {
      return `:${emoji.name}:` === this.state.emoji
    })

    if(matched.length === 0) {
      this.setState({emoji: null})
    }
  }

  updateState: function(e) {
    this.setState({emoji: e.target.value})
  },

  setEmoji: function(emoji) {
    this.setState({emoji: emoji})
  },

  // allows selecting first emoji by pressing "Enter" without submitting form
  grabKeyPress: function(e) {
    if(e.keyCode === 13) {
      e.preventDefault()
    }
  },

  emojiPicker: function() {
    if(this.state.showEmojiPicker) {
      return (
        <EmojiPicker
          style={emojiPickerStyles} onSelect={this.setEmoji}
          query={this.state.emoji}
        />
      )
    }
  },

  render: function() {
    return (
      <p ref="emoji">
        <label htmlFor="emoji">Emoji</label>
        <input name="emoji" id="emoji" value={this.state.emoji} autoComplete="off"
          type={this.state.showEmojiPicker ? "search" : "text"}
          onChange={this.updateState} onKeyDown={this.grabKeyPress}/>
        {this.emojiPicker()}
      </p>
    )
  }
})

export.defaults = MyEmojiInput

Phew! That was a lot of stuff!

Why doesn't it do a bunch of that for me?

You're right, it could! But the above code will give you an <input type="text"/> that only accepts a single emoji as a valid value. That's probably not what you want! But react-emoji-picker is flexible enough to support whatever sort of emoji-picking experience you want to build.

Basically, react-emoji-picker takes care of actually listing out all the emojis and responding when a user clicks them. Plus, it keeps the list of all emojis up-to-date in a community-supported way.

What emojis does it support?

Right now, it only supports twemoji. However, it's built with react-emoji, which also supports emojione, or even your own custom emoji set.

Patching this package to support other emoji flavors would be really easy. If you want to contribute that improvement, pull requests are welcome!

Contributing

Fork the repo, submit a small pull request. There aren't any tests, yet—if that makes you sad, feel free to add some!