missive / emoji-mart Goto Github PK
View Code? Open in Web Editor NEW🏪 One component to pick them all
Home Page: https://missiveapp.com/open/emoji-mart
License: MIT License
🏪 One component to pick them all
Home Page: https://missiveapp.com/open/emoji-mart
License: MIT License
If include
: Only use these categories
If exclude
: Ignore these categories
React is moving proptypes to a separate package in version 16 and in the meantime logging warnings. PropTypes are being used directly in various components currently causing the following warning Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
In my case I don't want to render the whole .emoji-mart-bar .emoji-mart-preview
dom. Could you please make it configurabe or Shall I make a PR?
For my own project I have forked emoji-mart (which is totally awesome!) with the following miscellaneous improvements. If there is demand to put any of these improvements into emoji-mart I would be happy to file PRs 👍 .
.emoji:hover
CSS (similar to Slack) <Picker exclude={['nature', 'activity', 'objects', 'flags', 'places', 'symbols', 'custom']} />
Results in Uncaught TypeError: Cannot read property 'sort' of undefined
For example ':flag-it:' is actually ':flag_it:' in emojione's json database.
I want to download a low quality spritesheet to consume low bandwidth for slow connections, it was there in earlier version but looks like its been removed. Now the _64.png starts downloading itself which are quite large files.
Is there anyway if I can customize it??
Currently I guess the results are just arbitrarily sorted, correct? Here are a few things we should do:
Thanks for picker, it is awesome!
We are integrating to Russian website and want to translate categories and other texts (like Search
placeholder). I didn’t find a way to do it.
Is is possible or we need to extend API?
At the moment it seems all images are rendered at the same time during load. My gut feel is performance would improve drastically if images where lazily rendered when scrolling. (See for example this library https://github.com/dinbror/blazy.)
Hey, guys! Thanks for nice picker! How about add prop for handle outside click? It would be useful if user want to hide component on outside click.
What do you think?
Is there a way to get the URL to the image asset from emoji-mart?
Since onClick
doesn't return it, but perhaps there's a util function I'm not seeing?
I'll take a stab at a PR if someone can point me in the right direction.
There are emojis not rendering properly on firefox. The native part of emoji object that is return from library emoji.native is not showing the right value if firefox. And even I store that value in my database and render in push notifications it is not showing correct preview.
Some images are below:
The dark background disappear totally.
It would be great if you can help me to resolve it :).
sheetURL
optional and fallback to unpkg with current emoji-data versionset
prop (apple|google|twitter|emojione)Today, i add emoji-mart to my project. I get the conflict React with following message:
addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
What should i do to resolve this problem?
Thanks you so much!
Just like Slack :)
I think there's an opportunity for smoother transitions between categories. Namely:
Hi there guys!
First of all, thanks for the awesome work with emoji-mart! I just realized the component returns
something like this for the grinning emoji, for example:
<span class="emoji-mart-emoji"><span style="width: 24px; height: 24px; display: inline-block; background-image: url("https://unpkg.com/[email protected]/sheet_google_64.png"); background-size: 4100%; background-position: 65% 37.5%;"></span></span>
Is there any possiblity to specify what type of element we would receive as return of the <Emoji />
component? For example, transforming the <span><span/></span>
to a single <img />
element solved a few problems with my implementation!
Or to make it simpler: is there any way to setup the <Emoji />
to return an <img />
instead of a couple of spans?
EDIT: or the data that will compose the emoji? Like the BG position and stuff?
Thanks a lot guys! <3
Having ChangeLog is very important for every open-source project. Here is main reasons: keepachangelog.com.
For example, I found 0.5 release. It is major release. Is it safe to update? Commits could not answer me, because I am not familiar with project’s internal architecture. So I can miss important changes.
@EtienneLem for example, all my open source projects (Autoprefixer, PostCSS) always have ChangeLog :)
Just want to get a comment form the emoji-mart contributors.
I'm going to work on a fork that will split out using Higher Order Components the rendering of the emoji-picker and the datasource.
At present, they are all bundled together, the picker imports directly the generate data.js
file. However, I believe this complicates the the release cycle as often the underlying dataset will change more than the picker does.
Secondly, in my use case, the application uses the emoji dataset elsewhere. For example, in an rich text editor autocomplete. And in string replace to replace emoji with images when viewed on a older platform, or Windows. So it doesn't make sense to have two copies of the emoji library.
Since making the changes required would likely result in an API change I wanted to get a feel for comments first before I started, especially related to component naming.
Something like:
Works as normal, uses localstorage and internal data library.
<Picker />
Picker
would just wrap the SimplePicker
and provide it with the internal data and localstorage functions. However, my application could consume the lower level component directly, which I've called SimplePicker
which would expect the storage/dataset functions to be injected into it.
const data = application.loadEmojiDataLib();
const saveSkinTone = skinTone => application.storeUserPreference({ skinTone });
<SimplePicker data={data} onSkinTonePreferenceChange={saveSkinTone} />
This means that by referencing only the SimplePicker, webpack would not bundle the included emoji dataset in my application code.
Thoughts / comments? 💬
Hi guys,
One on my favorite emoji is :thumbsup:
. When I use the Picker, it says that I can use :+1: :thumbsup:
but only :+1:
works. Do you have any idea why the second alias doesn't work?
Thanks
is there any way by which we can get Emoji from its unicode?
Hi guys
I tried to use the Emoji component with an emoji that doesn't exist.
For instance, with :thumbsup:
, it doesn't work :
<Emoji
key={i}
sheetURL={'/images/sheet_apple_32.png'}
emoji={{ id: 'thumbsup', skin: 3 }}
size={20}
/>
I have this error in the console :
emoji-mart.js?78ec:1041
Uncaught TypeError: Cannot read property 'skin_variations' of undefined
Thanks for the module.
This is perhaps the best picker out there.
Can this be used with non-React based projects? I can include React files in my project if thats really needed.
Hi there - Whenever I import the component any where into my app it displays very strange. Can you shed some light on this for me?
Here is my component code:
<Picker
emojiSize={24}
sheetSize={64}
color='#39BFD4'
perLine={16}
skin={1}
native={false}
set='emojione'
onClick={ (emoji)=> console.log(emoji) }
/>
Strange thing is the color doesn't even change for the main icons above the search.
I am using React v15.4.1
Any help would be greatly appreciated. Thanks
EmojiMart will not upload custom emojis, but it could support a custom
prop.
Hey guys!
Thanks for the Picker: it is absolutely amazing! How about adding the "No Emoji Found" to the i18n object, so we can customize it as well?
What do you guys think?
The npm package takes up just over half a meg, but most of it is actually the data file, which is about 500k. I was able to get this down to half the size (250k) by pruning unnecessary quotes "" around the keys and changing all the long key names to shorter, one letter keys.
Thoughts on changing the data file to make the package smaller?
There seems to be an issue that category(SVG) images are not taking height and width as given in the SVG viewport.
The SVG i.e category images takes a greater height.
I even found the fix that max-height
can be given to images so that in case they dont take height from SVG viewport then it can be a rescue. It looks like max-width: 18px
is given but not max-height
Do you want me to create a pull request that fixes the height of category images?
Hi! I've just forked your repo, in order to change the resulting Emoji component from two span's, to a img with background.
I've already done it on the dist file and I'm using on my project, but I would like to create a PR for you. The emojis works better as img instead of span in a contenteditable div.
Is there a way I can make the width fluid? I need to implement this to a responsive layout.
When I install de component and run it, I get the following error:
I can fix it changing the dist file on node_modules, from "React" to "react":
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["React"], factory);
else if(typeof exports === 'object')
exports["EmojiMart"] = factory(require("react"));
else
root["EmojiMart"] = factory(root["react"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_3__) {
I'm using create-react-app boilerplate to create the app.
Hey guys!
Is it possible to return an <Emoji />
by its html entity or utf code or in a way different than its name?
I mean by that something like <Emoji emoji="1f600" />
for the grinning emoji, for example.
Thanks!
Hi
I'm trying to use emoji-mart in the project built with create-react-app, it is working fine in development but while running the production build it is showing the following error
Uncaught TypeError: Cannot read property 'custom' of undefined at n (http://localhost:5000/static/js/main.4be574a7.js:1:788065) at r (http://localhost:5000/static/js/main.4be574a7.js:1:125795) at e (http://localhost:5000/static/js/main.4be574a7.js:1:126162) at http://localhost:5000/static/js/main.4be574a7.js:1:121536 at Array.map (native) at a.value (http://localhost:5000/static/js/main.4be574a7.js:1:121503) at r._renderValidatedComponentWithoutOwnerOrContext (http://localhost:5000/static/js/main.4be574a7.js:1:848718) at r._renderValidatedComponent (http://localhost:5000/static/js/main.4be574a7.js:1:848845) at r.performInitialMount (http://localhost:5000/static/js/main.4be574a7.js:1:844684) at r.mountComponent (http://localhost:5000/static/js/main.4be574a7.js:1:843730)
and nothing is showed on screen
Hi, nice component, but it does not seem to work with React server-side rendering, as it uses the window
object, which is only available on the client.
ReferenceError: window is not defined
at Object.get (/node_modules/emoji-mart/dist/emoji-mart.js:919:28)
at Object.defineProperty.value (/node_modules/emoji-mart/dist/emoji-mart.js:865:35)
at __webpack_require__ (/node_modules/emoji-mart/dist/emoji-mart.js:30:30)
at Object.defineProperty.value (/node_modules/emoji-mart/dist/emoji-mart.js:609:20)
at __webpack_require__ (/node_modules/emoji-mart/dist/emoji-mart.js:30:30)
at Object.defineProperty.value (/node_modules/emoji-mart/dist/emoji-mart.js:116:18)
at __webpack_require__ (/node_modules/emoji-mart/dist/emoji-mart.js:30:30)
at Object.defineProperty.value /node_modules/emoji-mart/dist/emoji-mart.js:64:20)
at __webpack_require__ (/node_modules/emoji-mart/dist/emoji-mart.js:30:30)
at Object.defineProperty.value (/node_modules/emoji-mart/dist/emoji-mart.js:50:18)
Hello,
I have an error when I use a category and I click on a smiley:
Uncaught Error: React DOM tree root should always have a node reference.
at invariant (bundle.js?v=1:10302)
at Object.getNodeFromInstance (bundle.js?v=1:15812)
at Object.didPutListener (bundle.js?v=1:29212)
at Object.putListener (bundle.js?v=1:14889)
at Object.putListener (bundle.js?v=1:23009)
at CallbackQueue.notifyAll (bundle.js?v=1:17958)
at ReactReconcileTransaction.close (bundle.js?v=1:27837)
at ReactReconcileTransaction.closeAll (bundle.js?v=1:18329)
at ReactReconcileTransaction.perform (bundle.js?v=1:18276)
at ReactUpdatesFlushTransaction.perform (bundle.js?v=1:18263)
Do you have a solution ?
Thank you
PS : "react": "latest"
An idea to implement a custom emoji.
{
name : "Github Icons",
icons : [{
tag:'hello',
title:'Hello Icon',
url : 'http://emoji url.png'
},{..},{..}]
}
Hello,
I want to display the Emoji Component like bellow but I don't know how can I replace the html result with component like:
Can you help me with this please?
Thank you.
I get html like this
Hello, how are you? :thumbsup:
I would like to get something like this:
Hello, how are you? <Emoji emoji=':thumbsup:' size={64} />
I want to render the emoji's in the sheet only if native support icon is present.
Can you please suggest where should I change ?.
@EtienneLem @rafbm Awesome Emoji Picker. Tried your Picker in IE, it wont work in IE. It says an error -> SCRIPT5009: 'Symbol' is undefined.
emoji-mart/scripts/build-data.js:97
for (let key in datum) {
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)
at startup (node.js:136:18)
at node.js:966:3
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.