missive/emoji-mart

🏪 One component to pick them all

emoji-mart's Issues

Default "Frequently Used"

Slack has a set of default frequently used icons. On Emoji mart the first time you load the picker (or clear localstorage) the frequently used is empty. This is confusing because the "Frequently Used" icon is selected in the top-left corner in the menu bar.

Cannot find module "React"

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.

Getting error when using in create-react-app after building

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

Custom Emoji Option Idea

An idea to implement a custom emoji.

{
  name : "Github Icons", 
  icons : [{
  tag:'hello',
  title:'Hello Icon',
 url : 'http://emoji url.png'
},{..},{..}]
} 

Return an Emoji by its code instead of name

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!

Add No emoji found to i18n

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?

Small space for 4 levels emoji description

Some short names don't match.

For example ':flag-it:' is actually ':flag_it:' in emojione's json database.

Support for incompatible React

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!

Return an IMG element instead of a SPAN

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(&quot;https://unpkg.com/[email protected]/sheet_google_64.png&quot;); 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

100% width

Is there a way I can make the width fluid? I need to implement this to a responsive layout.

More stylish scroll bar

A few points of comparison between emoji mart and Slack:

1. The scrollbar is shown permanently
2. It is styled beautifully
3. It starts below the search box, unlike emoji mart

How to download spritesheet from custom URL as in earlier versions

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??

Secondary alias not used

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

Support for React SSR

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)

Grab-bag of miscellaneous possible improvements

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 👍 .

• Frequently used default
• Smoother anchor bar transitions
• Search bar fixed at the top (similar to Slack)
• Search bar icon (similar to Slack)
• Clear search functionality
• Permanent scrollbar (on Chrome)
• Click on preview icon to toggle skin tone picker
• Prettier .emoji:hover CSS (similar to Slack)
• Misc CSS cleanups

Weird Display

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?

http://imgur.com/a/fl9Oz

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

Block-scoped declaration

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

React > 15.5 deprecating React.Proptypes

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.

Virtualize or lazy-render the list of emoji

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.)

category images not taking proper height in IE

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?

Prop onOutsideClick

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?

Optimize sheet size for retina / not-retina

• Make sheetURL optional and fallback to unpkg with current emoji-data version
• Add set prop (apple|google|twitter|emojione)
• Detect if current device is retina
• Serve dynamic sheet size (16|20|32|64)

[Feature] Emoji only in categories if native is present.

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 ?.

Better search results sorting

Currently I guess the results are just arbitrarily sorted, correct? Here are a few things we should do:

• List emojis starting with the search query first, so ok_hand appears first here:

- Then show results with a matching _short name_ before results with matching _keywords_, so co**ok**ed_rice appears before no_mouth:

- Then, sort based on alphanum order, rather than no order.

Smoother transition between categories

I think there's an opportunity for smoother transitions between categories. Namely:

1. The bottom border under the category icons can animate left/right, as opposed to a jump
2. The picker can smoothly scroll up/down as the category icons are clicked, as opposed to a jump

A couple of suggestions for the search bar

Emoji mart is awesome. Two suggestions for the search bar:

1. Add a magnifying glass icon, just like Slack

2. Add a cross icon when there is text in the search bar, to clear the text.

Make the search bar fixed when scrolling through picker

Just like Slack :)

Error following example with React Native

Importing the Picker and inserting the component as shown in the example results in this error. Is this package compatible with React Native?

How replace emoji codes in html to Emoji Component?

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} />

can this be used in non-React based projects?

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.

Show skin options on long press and right click

Can't load css

I was try this package, but when i add <Picker set='emojione' /> the css seems not loaded

what should i do so I can use this package ?
thanks

I18n support

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?

Config option to show/hide 'emoji-mart-bar'

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?

Error if the emoji doesn't exist

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

Get Emoji from its unicode

is there any way by which we can get Emoji from its unicode?

Can't run npm install on project

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.

The problem npm is not able to install it.. Any ideas?

Request: Return URL of emoji (Twemoji)

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.

Some emoticons not working on firefox.

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 :).

Custom emojis category

EmojiMart will not upload custom emojis, but it could support a custom prop.

ChangeLog

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 :)

Split out emoji library from emoji picker. 👻

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? 💬

Empty results sleuth is hoverable

This sleuth emoji probably shouldn't be hoverable.

Data file unnecessarily large

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?

React DOM tree root should always have a node reference

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"

Using exclude breaks search

  <Picker exclude={['nature', 'activity', 'objects', 'flags', 'places', 'symbols', 'custom']} />

Results in Uncaught TypeError: Cannot read property 'sort' of undefined

Virtualize the emoji list or only render visible categories

Include/exclude categories option

If include: Only use these categories
If exclude: Ignore these categories

Won't work in Internet Explorer

@EtienneLem @rafbm Awesome Emoji Picker. Tried your Picker in IE, it wont work in IE. It says an error -> SCRIPT5009: 'Symbol' is undefined.