tommoor / emojione-picker Goto Github PK
View Code? Open in Web Editor NEWA react emoji picker for use with emojione
Home Page: http://tommoor.github.io/emojione-picker
License: MIT License
A react emoji picker for use with emojione
Home Page: http://tommoor.github.io/emojione-picker
License: MIT License
This would allow us to pop up a dynamic picker based on what's been typed in an input or textarea
Can you please update react-virtualized
to 9.x please. Being behind is causing webpack to pull in react-virtualized
into my project twice since emojione-picker
is on an older version.
When are you planning to upgrade to EmojiOne 3? Not sure if there's any breaking changes, might be as simple as changing the locked version?
I got this error:
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "emojione-picker"
npm ERR! node v4.2.2
npm ERR! npm v2.14.7
npm ERR! shasum check failed for /var/folders/kh/sy_bkwjn3n7fsf2zbgrysb580000gp/T/npm-2582-81be861c/registry.npmjs.org/emojione/-/emojione-2.1.0.tgz
npm ERR! Expected: d0100d67661baaba2258e7033e3b0c614c722f5b
npm ERR! Actual: 4dd64b2fdc54a6b1b70e62e033eb2a72c64f972a
npm ERR! From: http://registry.npmjs.org/emojione/-/emojione-2.1.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
Hi,
with this change and using webpack with react, i get this error message:
Module parse failed: /Users/juRiii/dev/go/src/github.com/juRiii/.../node_modules/emojione-picker/node_modules/emojione/emoji.json Unexpected token (1:11) You may need an appropriate loader to handle this file type.
My solution is adding this to my webpack configuration:
loaders: [
{
test: /\.json$/,
loader: "json-loader"
}
]
and doing
npm install --save json-loader
A proper mention of this situation in README.md
would be nice, it took me a while ๐
Sorry but can you describe how to use the example?
I can't use the example. It shows nothing when I open index.html in browser.
I have this warning threw by React :
Warning: Unknown props `unicode_alternates`, `category`, `emoji_order`, `aliases`, `aliases_ascii`, `keywords` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in div (created by Emoji)
in Emoji (created by Picker)
in li (created by Picker)
in ul (created by Picker)
in div (created by Picker)
I use React 15.2.1
Hoping you could create same thing for Meteor. A package would be awesome. I would really appreciate it!! Thanks!
Can you please show a working code example on how you use and reference directly the provided CSS from within the node_modules directory? I tried few different ways and so far no luck.
Following is what I have tried:
styles
and passing it as styles
to EmojiPicker
component (used this tool):const styles = {
emoji_dialog: {
width: "276px",
height: "220px",
background: "#fff",
boxSizing: "border-box",
borderRadius: "2px",
overflow: "hidden",
position: "relative",
boxShadow: "0 0 0 1px rgba(0,0,0,0.1), 0 2px 15px rgba(0,0,0,0.1)"
},
emoji_dialog__emojione: {
margin: "0"
},
emoji_dialog__emoji_dialog_header: {
padding: "0 10px",
backgroundColor: "#F5F7F9"
},
emoji_dialog__emoji_dialog_header_ul: {
padding: "0",
margin: "0",
listStyle: "none"
},
emoji_dialog__emoji_dialog_header_li: {
display: "inline-block",
boxSizing: "border-box",
height: "42px",
padding: "9px 5px"
},
emoji_dialog__emoji_dialog_header_li_img: {
width: "22px",
height: "22px",
WebkitFilter: "grayscale(100%)",
filter: "grayscale(100%)"
},
emoji_dialog__emoji_dialog_header_li_svg: {
width: "22px",
height: "22px",
WebkitFilter: "grayscale(100%)",
filter: "grayscale(100%)"
},
emoji_dialog__emoji_dialog_header_li_active: {
background: "#fff"
},
emoji_dialog__emoji_dialog_header_li_active_img: {
WebkitFilter: "grayscale(0)",
filter: "grayscale(0)"
},
emoji_dialog__emoji_dialog_header_li_active_svg: {
WebkitFilter: "grayscale(0)",
filter: "grayscale(0)"
},
emoji_dialog__emoji_row: {
boxSizing: "border-box",
overflowY: "hidden",
paddingLeft: "10px"
},
emoji_dialog__emoji_row__emoji: {
display: "inline-block",
padding: "5px",
borderRadius: "4px"
},
emoji_dialog__emoji_category_header: {
display: "table-cell",
verticalAlign: "middle"
},
emoji_dialog__emoji_category_title: {
fontSize: "18px",
fontFamily: "sans-serif",
fontWeight: "normal",
color: "#444"
},
emoji_dialog__emoji_category_heading_decoration: {
textAlign: "right"
},
emoji_dialog__modifiers: {
listStyle: "none",
padding: "0",
margin: "0",
verticalAlign: "middle",
whiteSpace: "nowrap"
},
emoji_dialog__modifiers_li: {
display: "inline-block",
padding: "0 2px"
},
emoji_dialog__modifiers_li_last_of_type: {
paddingRight: "0"
},
emoji_dialog__modifiers__modifier: {
display: "inline-block",
borderRadius: "10px",
width: "15px",
height: "15px",
position: "relative"
},
emoji_dialog__modifiers__modifier_active__after: {
content: "\"\"",
display: "block",
position: "absolute",
width: "7px",
height: "7px",
borderRadius: "10px",
border: "2px solid #fff",
top: "2px",
left: "2px"
},
emoji_dialog__modifiers_li_hover: {
MozTransitionDuration: "200ms",
WebkitTransitionDuration: "200ms",
transitionDuration: "200ms",
WebkitTransform: "scale(1.2)",
MozTransform: "scale(1.2)",
transform: "scale(1.2)"
},
emoji_dialog__emoji_search_wrapper: {
padding: "6px 16px"
},
emoji_dialog__emoji_search: {
fontSize: "12px",
padding: "6px 4px",
width: "100%",
border: "1px solid #ddd",
borderRadius: "4px"
},
emoji_dialog__emoji_categories_wrapper: {
position: "absolute",
top: "42px",
bottom: "0",
left: "0",
right: "0"
},
emoji_dialog__emoji_search_wrapper____emoji_categories_wrapper: {
top: "83px"
},
emoji_dialog__emoji_row__emoji_hover: {
background: "#F5F7F9"
},
emoji_dialog__emoji: {
width: "22px",
height: "22px"
}
};
which apparently doesn't work :-(
import styles from "emoji-picker/css/picker";
const cx = classNames.bind(styles);
and
<EmojiPicker className={cx("emoji_dialog")}
onChange={function(data) { console.log("Emoji chosen", data); }}
emojione={{imageType: "png", sprites: true}}
search={true}/>
Any idea where I am doing wrong?
Thanks you :-)
I'm trying out a slightly modified version of this package in two seperate projects. In one (which is an Electron applicatoin), for all intents and purposes of this issue, it works as expected.
The other is a small widget built with React. I ported over the Emoji Picker from the other project, but when opening the picker in the widget, the various emojis load extremely slow (~2 seconds) and cause the widget to become unresponsive.
What might be causing this issue?
Hi, how to actually insert the emoji to the text input/textarea?
My current project is using this plugin to pick emoji. Whenever user pick the emoji, the following function is triggered:
this.addEmoji(data.unicode);
addEmoji(text) {
const { editorState } = this.state;
const selection = editorState.getSelection();
const contentState = editorState.getCurrentContent();
const txt = '&#x' + text + ';';
console.log(txt);
console.log(selection);
console.log(contentState);
let nextEditorState = EditorState.createEmpty();
if (selection.isCollapsed()) {
const nextContentState = Modifier.insertText(contentState, selection, txt);
nextEditorState = EditorState.push(
editorState,
nextContentState,
'insert-characters'
);
} else {
const nextContentState = Modifier.replaceText(contentState, selection, text);
nextEditorState = EditorState.push(
editorState,
nextContentState,
'insert-characters'
);
}
this.onChange(nextEditorState);
}
I use the DraftJS for the editor. Whenever I pick the emoji, the unicode is inserted to the editor but it doesn't display the emoji (it displays the raw unicode instead). Is there a step I am missing in using the emoji? Or is it the problem with DraftJS?
Thanks.
How can I get this to run on my website? the /demo/index.html doesn't show anything the the lib/preview.js is missing.
Is there a way to disable modifiers?
If not shall I raise a PR?
I don't want to hide it using css instead I do not need to render it.
I wanted to setup the project to start hacking a bit inside, and npm start
is broken for me.
~/d/f/emojione-picker master โฏ yarn start
yarn start v0.22.0
$ concurrently "npm run watch" "http-server ./examples"
[1] Starting up http-server, serving ./examples
[1] Available on:
[1] http://127.0.0.1:8080
[1] Hit CTRL-C to stop the server
[0]
[0] > [email protected] watch /dev/forks/emojione-picker
[0] > watchify --extension=.jsx -d -t [ babelify ] src/*.jsx preview.jsx -o lib/preview.js
[0]
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /css/picker.css" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /node_modules/emojione/assets/css/emojione.css" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /lib/preview.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /css/picker.css" Error (404): "Not found"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /node_modules/emojione/assets/css/emojione.css" Error (404): "Not found"
[1] [Tue Apr 11 2017 20:57:46 GMT-0700 (PDT)] "GET /lib/preview.js" Error (404): "Not found"
It looks like the emoji picker doesn't currently use emoji shortnames when searching. This causes some queries that should intuitively work to not return the expected results.
For example, searching for "wave" does not return the ๐ emoji, which has the shortcode :wave:
. Searching for "wav" returns it, because the emoji is named "waving hand sign", but searching for "wave" does not.
I am using your lib inside my chat input component, which uses textarea onChange
when user enters something to update the state. However this state change triggers EmojiPicker to render every time the user presses a key. Understandably this causes CPU use to go through the roof and input slows to a crawl.
Suggestion:
Add shouldComponentRender()
handling using fx react-addons-shallow-compare
:
shouldComponentUpdate(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
}
shallowCompare
is now a deprecated plugin, and React recommends using the build-in PureComponent
instead.
It would be awesome to have support for the different emoji sprite sheets available at https://github.com/iamcal/emoji-data
They support some of the native style emoji images as well as Twitter and emojione.
We can store usage of the picker in localStorage and then use this to construct a frequently used tab.
After npm run watch I've got:
Error: Cannot find module 'C:\emojione-picker-master\src*.jsx' from 'C:\emojione-picker-master'
Currently, the component is using the full underscore. Would it be possible to remove the unnecessary functions and only use and import the specific functions from lodash instead?
Maybe only throttle
would be needed.
I'm using the emoji picker in an application that supports multiple themes. I'm currently pulling in the emojione-picker css file and layering in overrides for each theme. It would be nice if certain elements, such as the search input, could inherit my generic element styles from my app theme without needing the overrides.
One option is to separate the base/layout styles into a standalone file, and put all aesthetic properties such as colors into a separate "default-theme.css" file. This would give users the flexibility to pull in the default theme file only if they want it.
Thoughts?
Hello everybody, I need some help.
How can I wrap emojione-picker class into react-onclickoutside in order to use them together?
import React from 'react';
import ReactDOM from 'react-dom';
import OnClickOutside from 'react-onclickoutside';
import FileInput from 'react-file-input';
import EmojiPicker from 'emojione-picker';
class Conversation extends React.Component {
constructor() {
super();
this.state = {
text: '',
isOpened: false
}
}
showEmoji() {
this.setState({
isOpened: !this.state.isOpened
});
};
render(){
return (
<div className="conversation">
<div className="conversation__footer">
<div className="conversation__wrapper">
<a className={this.state.isOpened ? "fa fa-smile-o fa-2x conversation__icon conversation__icon--smile" : "fa fa-smile-o fa-2x conversation__icon conversation__icon--smile conversation__icon--opened"}
aria-hidden="true"
onClick={this.showEmoji.bind(this)}/>
<EmojiPicker className={this.state.isOpened ? " " : "display-none"} onChange={function(data){
console.log("Emoji chosen", data);
}} />
</div>
</div>
</div>
)
}
};
export default Conversation;
Apologies, this is more of a question than an issue. Specifically, the picker has an option :upside_down: which is not renderable using either https://github.com/banyan/react-emoji OR https://www.npmjs.com/package/react-emojione
Can I ask what module you use to display emojis on the page with react?
warning.js:44 Warning: Failed propType: Invalid prop
search
of typeboolean
supplied toPicker
, expectedstring
. Check the render method ofSearch
.
Emojione includes different skin tones, it would be nice to include an option that will enable switching of this within the picker and remember your setting
2.1.2 resolves an issue with this plugin not searching shortnames. Several Mastodon users are reporting that they are now seeing errors where the Sailfish OS browser doesn't recognize values.keywords.includes() as a function, which prevents them from using Mastodon's Compose tab.
I note that the Sailfish browser is based on an older version of Firefox (38, as opposed to the current release 43).
Is there a way to resolve this, or is the unfortunate answer that this isn't going to work until Sailfish updates their browser architecture?
Using webpack.
This import
is not standard: https://github.com/tommoor/emojione-picker/blob/master/src/picker.jsx#L4
and fails with webpack. If emojione
is a dependency (and it is), it should be imported as emojione/emoji.json
without node_modules
.
I changed it locally and it it indeed loads the json, however there's another bug, hoping this image can show it:
Reverting to < 1.0
.
hi,
in the example preview.js seem missing....
Do you have an example how to setup?
Thanks
Hi,
I just wanted to check and see if there's any support for custom emojis? Will I need to fork this repo and add them to the strategy.js file? Or is there a way to extend it without needing to do a fork?
Any ideas you have will be greatly appreciated.
Thanks!
By default emojione loads a small png for each emoji, but there's a spritesheet option that loads only one image then renders via background-position for each emoji.
It's simple to turn it on. Just add these two lines of js before rendering the Picker:
emojione.imageType = 'png'; emojione.sprites = true;
Hope this helps someone. Awesome little component here, @tommoor, thank you! Here's a screenshot of my (not yet public) implementation which is going on a dark background:
I am trying to use emojione but the css is not loading with my code (no errors), even i am not able to set style attribute to :
component code:
`import React from 'react';
import TextField from 'material-ui/TextField';
import {white} from 'material-ui/styles/colors';
import EmojiPicker from 'emojione-picker';
import Mood from 'material-ui/svg-icons/editor/insert-emoticon';
import Add from 'material-ui/svg-icons/content/add';
import Voice from 'material-ui/svg-icons/hardware/keyboard-voice';
import {blue200, blue700, darkBlack, lightBlack} from 'material-ui/styles/colors';
const style = {
position: 'fixed',
bottom: 0,
zIndex: 9999999,
background: white,
width: '100%',
padding: '5px 0 0px 0px'
}
const settings = {
imageType: 'png',
sprites: true
};
const emojiStyle = {
width: '100%'
};
const options = {
verticalAlign:'bottom',
padding:'10px 5px',
cursor: 'pointer',
color: lightBlack
};
const TextFieldExampleSimple = () => (
export default TextFieldExampleSimple;`
Webpack code:
`require('es6-promise').polyfill();
webpack = require('webpack');
module.exports = {
context: __dirname,
// plugins: [
// new webpack.optimize.AggressiveMergingPlugin(),
// new webpack.optimize.UglifyJsPlugin({
// compress: { warnings: false },
// comments: false,
// minimize: false
// }),
// new webpack.DefinePlugin({
// 'process.env': {
// 'NODE_ENV': JSON.stringify('production')
// }
// })
// ],
entry: {
jsx: "./src/index.jsx",
html: "./src/index.html",
},
output: {
path: __dirname + "/static",
filename: "bundle.js",
},
module: {
preLoaders: [
//Eslint loader
// { test: /\.jsx?$/, exclude: /node_modules/, loader: "eslint-loader"},
],
loaders: [
{ test: /\.html$/, loader: "file?name=[name].[ext]" },
// { test: /\.css$/, loader: "file?name=[name].[ext]" },
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ["react-hot", "babel-loader"] },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.json$/, loader: "json-loader" }
],
},
resolve: {
extensions: ['', '.js', '.jsx']
},
eslint: {
configFile: './.eslintrc'
}
};
`
Note: the component is inside an iframe
Tests should be added to make sure everything works as expected :)
In search when I search for poop
I would expect the poop icon to surface. The issue is that the regex for search is off of the keywords but it also should be off the name
Hi I'm developing an Electron based application and use emojione-picker. However I soon noticed a serious issue that all emoji files (png and svg) couldn't be loaded since there's no specific schema defined. In the preview.js, the src is setup like src="//cdn.jsdelivr.net/emojione/assets/png/1f91e.png?v=2.2.6:1"
which would be interpreted into * file://* schema in Electron...
Is there a better way to override the src schema or how about specify the schema as http:// somewhere in the code?
Without JSX compilation needed
Food => "Food & Drink"
Travel => "Travel & Places"
It loads all the emoji's of all categories for the first time itself, which slows up the browser. Can we load only the emoji's of currently selected category?
It would be great if we could navigate through the emoji list using the keyboard, like the emoji picker in Slack
A live example would sell this component better
The specification of Content Security Policy
describes as the following:
This document defines Content Security Policy, a mechanism web applications can use to mitigate a broad class of content injection vulnerabilities, such as cross-site scripting (XSS).
To apply Content Security Policy, we need to set a nonce to style
element appended by react-virtualized. I have made a change for react-virtualized. (bvaughn/react-virtualized#663)
emojione-picker is also required to be altered to correspond the change. I have also finished to create a change for emojione-picker fcb244d, but we may wait for a new version of react-virtualized including its Content Security Policy support.
First render performance is poor due to the massive amount of emojis we have here, I have a few ideas to speed up the perceived load...
Emojione provides a strategy file. I think it would be best if the component uses the official file instead: https://github.com/Ranks/emojione/blob/master/emoji_strategy.json
It would allow an easier update to Emojione version as well in the future :)
when i used emojione-picker in my chat module , when clicking on one emoji i could fetch the shortname in my chattext but when clicking on chat send,the shortname was not converted to the exact emoji as expected.what is the problem?? should i have to define a method to convert shortname to emoji??
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.