{"_id":"@barbuza/react-emoji-picker","_rev":"2-8e08e38679fbb439f39f73e218e97d5d","name":"@barbuza/react-emoji-picker","description":"A React component providing a visual emoji picker, similar to Slack's","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@barbuza/react-emoji-picker","version":"1.1.0","description":"A React component providing a visual emoji picker, similar to Slack's","repository":{"type":"git","url":"git+https://github.com/chadoh/react-emoji-picker.git"},"main":"index.js","keywords":["react","react-component","emoji","emoji-picker","twemoji","emojione","react-emoji"],"author":{"name":"Chad Ostrowski","email":"hi+npm@chadoh.com","url":"chadoh.com"},"license":"ISC","dependencies":{"react":"^15.4.0","react-emoji":"^0.4.1"},"gitHead":"1e73cea65612c72654bdccb7c565502499a1b889","bugs":{"url":"https://github.com/chadoh/react-emoji-picker/issues"},"homepage":"https://github.com/chadoh/react-emoji-picker#readme","_id":"@barbuza/react-emoji-picker@1.1.0","scripts":{},"_shasum":"0cdf05d9872d34b18c81105b04529030f358d513","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.1","_npmUser":{"name":"barbuza","email":"barbuzaster@gmail.com"},"dist":{"shasum":"0cdf05d9872d34b18c81105b04529030f358d513","tarball":"https://registry.npmjs.org/@barbuza/react-emoji-picker/-/react-emoji-picker-1.1.0.tgz","integrity":"sha512-kjY6Ys/cYNO8g6D3tukHnWzgkddgBpn6osNoZUgiYlLbkM+Zupk3Qu3itwGx1zebfX7Fq+D8BorKGPVvqG36AQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxGmLlrRNW73Y18JMIsbTbxB6YmTrIDsmHuL7osnA+PwIgZA82bIFqxUGp4ih6kEmajXA9DPRpkkeA6hY02drbJLY="}]},"maintainers":[{"name":"barbuza","email":"barbuzaster@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/react-emoji-picker-1.1.0.tgz_1492635666640_0.5642971144989133"}}},"readme":"react-emoji-picker\n==================\n\nThanks to the awesome work of @banyan on [react-emoji](https://github.com/banyan/react-emoji), it's easy to turn user-generated boring-old plain text like `:laughing:` into super sweet emojis like <img src=\"https://twemoji.maxcdn.com/16x16/1f606.png\"/>\n\nBut how do you introduce emoji n00bs to this brave new world of named emojis?\n\nWith react-emoji-picker!\n\nreact-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:\n\n<img width=\"50%\" alt=\"emoji picker palette, with search bar\"\n  src=\"http://f.cl.ly/items/1n2z3n1D3B1B0y3o2s03/Image%202015-12-02%20at%2012.53.40%20PM.png\"/>\n\n\nHow to use\n----------\n\nIf 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:\n\n``` javascript\nvar React = require('react');\nvar EmojiPicker = require('emoji-picker');\nvar emojiMap require('react-emoji-picker/lib/emojiMap');\n\n// styles for the emoji picker wrapper\nvar emojiPickerStyles = {\n  position: 'absolute',\n  left: 0, top: '3.9rem',\n  backgroundColor: 'white',\n  width: '100%',\n  padding: '.3em .6em',\n  border: '1px solid #0074d9',\n  borderTop: 'none',\n  zIndex: '2'\n};\n\nvar MyEmojiInput = React.createClass({\n  getInitialState: function() {\n    return {\n      emoji: null,\n      showEmojiPicker: false,\n    }\n  },\n\n  componentDidMount: function() {\n    document.addEventListener('click', this.toggleEmojiPicker, false)\n  },\n\n  componentWillUnmount: function() {\n    document.removeEventListener('click', this.toggleEmojiPicker, false)\n  },\n\n  toggleEmojiPicker: function(e) {\n    if(this.refs.emoji.contains(e.target)) {\n      this.setState({showEmojiPicker: true});\n    } else {\n      setTimeout(this.validateEmoji, 10)\n      this.setState({showEmojiPicker: false});\n    }\n  },\n\n  validateEmoji: function() {\n    var matched = emojiMap.filter(function(emoji) {\n      return `:${emoji.name}:` === this.state.emoji\n    })\n\n    if(matched.length === 0) {\n      this.setState({emoji: null})\n    }\n  }\n\n  updateState: function(e) {\n    this.setState({emoji: e.target.value})\n  },\n\n  setEmoji: function(emoji) {\n    this.setState({emoji: emoji})\n  },\n\n  // allows selecting first emoji by pressing \"Enter\" without submitting form\n  grabKeyPress: function(e) {\n    if(e.keyCode === 13) {\n      e.preventDefault()\n    }\n  },\n\n  emojiPicker: function() {\n    if(this.state.showEmojiPicker) {\n      return (\n        <EmojiPicker\n          style={emojiPickerStyles} onSelect={this.setEmoji}\n          query={this.state.emoji}\n        />\n      )\n    }\n  },\n\n  render: function() {\n    return (\n      <p ref=\"emoji\">\n        <label htmlFor=\"emoji\">Emoji</label>\n        <input name=\"emoji\" id=\"emoji\" value={this.state.emoji} autoComplete=\"off\"\n          type={this.state.showEmojiPicker ? \"search\" : \"text\"}\n          onChange={this.updateState} onKeyDown={this.grabKeyPress}/>\n        {this.emojiPicker()}\n      </p>\n    )\n  }\n})\n\nexport.defaults = MyEmojiInput\n```\n\nPhew! That was a lot of stuff! \n\n### Why doesn't it do a bunch of that for me?\n\nYou'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.\n\nBasically, 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.\n\n\nWhat emojis does it support?\n----------------------------\n\nRight now, it only supports [twemoji](https://twemoji.maxcdn.com/). However, it's built with [react-emoji](https://github.com/banyan/react-emoji), which also supports [emojione](https://github.com/Ranks/emojione), or even your own custom emoji set.\n\nPatching this package to support other emoji flavors would be really easy. If you want to contribute that improvement, pull requests are welcome!\n\n\nContributing\n------------\n\nFork the repo, submit a small pull request. There aren't any tests, yet—if that makes you sad, feel free to add some!\n","maintainers":[{"name":"barbuza","email":"barbuzaster@gmail.com"}],"time":{"modified":"2022-06-12T15:02:28.026Z","created":"2017-04-19T21:01:08.635Z","1.1.0":"2017-04-19T21:01:08.635Z"},"homepage":"https://github.com/chadoh/react-emoji-picker#readme","keywords":["react","react-component","emoji","emoji-picker","twemoji","emojione","react-emoji"],"repository":{"type":"git","url":"git+https://github.com/chadoh/react-emoji-picker.git"},"author":{"name":"Chad Ostrowski","email":"hi+npm@chadoh.com","url":"chadoh.com"},"bugs":{"url":"https://github.com/chadoh/react-emoji-picker/issues"},"license":"ISC","readmeFilename":"README.md"}