question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Split out emoji library from emoji picker. πŸ‘»

See original GitHub issue

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? πŸ’¬

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:9
  • Comments:24 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
bramchicommented, Jun 21, 2018

I’m also seeing all.json show up together with twitter.json when I use the NimblePicker and set it to use the twitter.json data.

Using emoji-mart 2.6.1 with webpack 3.11.0, all the following ways of importing result in all.json Γ‘nd twitter.json in the bundle:

import { NimblePicker } from 'emoji-mart' import { NimblePicker } from 'emoji-mart/dist-es' import NimblePicker from 'emoji-mart/dist/components/picker/nimble-picker' import NimblePicker from 'emoji-mart/dist-es/components/picker/nimble-picker'

Any ideas/suggestions for a patch/solution are welcome πŸ˜„ Or is Webpack 3 not supported? Current situation doesn’t allow me to upgrade to Webpack 4.

0reactions
towfiqicommented, Jan 22, 2019

This is still an issue. The NimblePicker also includes the all.json file.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I split a string containing emoji into an array?
JavaScript ES6 has a solution!, for a real split: ... var emojiStringToArray = function (str) { split ... The library also works with...
Read more >
All Emojis – Emoji List for Copy and Paste - freeCodeCamp
Emoji Meaning Unicode πŸ™‚ Slightly smiling face U+1F642 πŸ˜€ Smiling face U+1F600 πŸ˜ƒ Smiling face with big eyes U+1F603
Read more >
Emoji List, v15.0 - Unicode
β„– Code CLDR Short Name 1 U+1F600 grinning face 2 U+1F603 grinning face with big eyes 3 U+1F604 grinning face with smiling eyes
Read more >
emoji-datasource-split - npm
This project uses emoji-datasource images. The purpose of this project is to make it easy to lazy load group of emojis instead of...
Read more >
Emoji unicode characters for use on the web
Native Android Symbola Unicode Bytes (UTF‑8) 😁 😁 😁 U+1F601 \xF0\x9F\x98\x81 πŸ˜‚ πŸ˜‚ πŸ˜‚ U+1F602 \xF0\x9F\x98\x82 πŸ˜ƒ πŸ˜ƒ πŸ˜ƒ U+1F603 \xF0\x9F\x98\x83
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found