Comments (10)
This is the temporary solution I added for my application:
import _ from 'lodash';
import { emojiIndex } from 'emoji-mart';
const { emojis } = emojiIndex;
export function getEmojiDataByNativeString (nativeString) {
return _.find(emojis, { 'native': nativeString });
}
Not sure if this works in all cases yet. lodash
isn't essential for this, I just use it elsewhere in my application.
from emoji-mart.
Example without lodash:
import { emojiIndex } from 'emoji-mart';
export function getEmojiDataByNativeString (nativeString) {
return Object.values(emojiIndex.emojis).find(item => item.native === nativeString)
}
from emoji-mart.
Won't work when the unicode has skin tones in it.
This should though:
import { emojiIndex } from 'emoji-mart';
export function getEmojiDataByNativeString(nativeString) {
const skinTones = ['', '๐ป', '๐ผ', '๐ฝ', '๐พ', '๐ฟ'];
let skin;
let baseNativeString = nativeString;
skinTones.forEach(skinTone => {
baseNativeString = baseNativeString.replace(skinTone, '');
if (nativeString.indexOf(skinTone) > 0) {
skin = skinTones.indexOf(skinTone) + 1;
}
});
const emojiData = Object.values(emojiIndex.emojis).find(item => item.native === baseNativeString);
emojiData.skin = skin;
return emojiData;
}
from emoji-mart.
@johnsenpeder Very nice thanks.
However I have found a few instances where this doesn't work. They appear to be gender related:
person_with_ball
man-bouncing-ball
woman-bouncing-ball
You can have a play here to see the problem: https://codesandbox.io/s/oq8rkky5yq
from emoji-mart.
For anybody else landing here from a Google search and wondering why this issue is closed, emoji-mart
now has a getEmojiDataFromNative
function ๐
https://github.com/missive/emoji-mart/blob/master/README.md#get-emoji-data-from-native
from emoji-mart.
Not at the moment
from emoji-mart.
Is there any progress?
from emoji-mart.
@jmcrthrs yeah, seems to be gender related... ๐ค interesting..
from emoji-mart.
A quick fix would be to add the following since no other gender dependent emoji which I checked had the same problem. That being said I haven't investigated this fully.
import { emojiIndex } from 'emoji-mart';
import { BaseEmoji, CustomEmoji } from 'emoji-mart/dist-es/utils/emoji-index/nimble-emoji-index';
const isBaseEmoji = (emoji: BaseEmoji | CustomEmoji | undefined): emoji is BaseEmoji => {
return Boolean(emoji && (emoji as BaseEmoji).native);
};
export function getEmojiDataByNativeString(nativeString: string) {
const skinTones = ['', '๐ป', '๐ผ', '๐ฝ', '๐พ', '๐ฟ'];
let skin = null;
let baseNativeString = nativeString;
skinTones.forEach(skinTone => {
baseNativeString = baseNativeString.replace(skinTone, '');
if (nativeString.indexOf(skinTone) > 0) {
skin = skinTones.indexOf(skinTone) + 1;
}
});
// Added to checks - no other gender dependent emoji which I checked had the same problem.
if (baseNativeString === 'โนโโ๏ธ') {
baseNativeString = 'โน๏ธโโ๏ธ';
} else if (baseNativeString === 'โนโ๏ธโ๏ธ') {
baseNativeString = 'โน๏ธโโ๏ธ';
}
const emojiData = Object.values(emojiIndex.emojis)
.filter(isBaseEmoji)
.find(item => item.native === baseNativeString);
if (emojiData) {
emojiData.skin = skin;
}
return emojiData;
}
from emoji-mart.
@ifiokjr sadly it does happen with other ones too, :man-lifting-weights:
is one
from emoji-mart.
Related Issues (20)
- How can I add other utf8 characters as custom emojis?
- How to detect loading of Picker?
- Rerendered emoji fails to be inserted
- Question: Using twitter SVG
- Supporting multi skin tone handshakes
- What font is used? HOT 1
- Emoji Rendering issue
- Set twitter is not working in any lib version HOT 1
- Svelte Integration
- How does onEmojiSelect work with the custom emojis?
- Ability to specify the initial category
- Skin tone button does not work (React)? HOT 3
- allow escape listeners
- A11Y: various issues HOT 2
- Previous version Emoji picker are breaking due to new data.json HOT 1
- Error using emoji-mart Picker in Chrome Extension HOT 1
- There is an expression that displays abnormally
- onClickOutside is called even when user clicks inside Picker
- Feature Request: quick reactions picker HOT 2
- How to use .update method ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from emoji-mart.