How to use emoji-mart - 10 common examples
To help you get started, we’ve selected a few emoji-mart examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / types / emoji-mart / emoji-mart-tests.tsx View on Github 
if (match && match[2]) {
// smiley is closed
let emoji = emojiIndex.emojis[match[1]];
const isSingleEmoji = (e: EmojiEntry): e is EmojiData => {
return 'name' in e;
};
const isNativeEmoji = (e: EmojiData): e is BaseEmoji => {
return 'native' in e;
};
if (!isSingleEmoji(emoji)) {
emoji = emoji[1];
}
const native = (isNativeEmoji(emoji) && emoji.native) || '';
setSearch(search.replace(match[0], native));
} else if (match && match[1].length > 2) {
suggestions = emojiIndex.search(match[1]) || [];
}
return (
<div>
{suggestions.map(emoji => {
return 'native' in emoji && <span>{emoji.native}</span>;
})}
{match && <div>{match[0]}</div>}
<input value="{search}" placeholder="enter a message..." type="text">
</div>
);
};
const AutoCompleteExample: React.FC = () => {
const [search, setSearch] = useState('');
const changed = (e: React.ChangeEvent) => {
const target = e.target as { value: any };
setSearch(target.value);
};
const match = search.match(/:([a-z_]+)(:)?/);
let suggestions: ReturnType = [];
if (match && match[2]) {
// smiley is closed
let emoji = emojiIndex.emojis[match[1]];
const isSingleEmoji = (e: EmojiEntry): e is EmojiData => {
return 'name' in e;
};
const isNativeEmoji = (e: EmojiData): e is BaseEmoji => {
return 'native' in e;
};
if (!isSingleEmoji(emoji)) {
emoji = emoji[1];
}
const native = (isNativeEmoji(emoji) && emoji.native) || '';
setSearch(search.replace(match[0], native));
} else if (match && match[1].length > 2) {
suggestions = emojiIndex.search(match[1]) || [];
}
return (
<div></div>const handleInputChange = React.useCallback(() => {
if (!inputRef.current) return
const inputValue = inputRef.current.value
const lastWord = inputValue.split(' ').pop()
const emojiPickerActive = lastWord.startsWith(':') && useEmojis
const lastEmojiIdx = emojiPickerActive ? inputValue.lastIndexOf(':') : null
const emojiSearch = emojiPickerActive ? inputValue.slice(lastEmojiIdx) : null
let emojiResults = emojiSearch ? emojiIndex.search(emojiSearch) : []
if (emojiResults.length === 0) {
// Slice the ':' prefix so we search for emojis instead of emoticons so
// ':smile' => 'smile'
// This is needed because we can also search for ':)' which requires the
// ':' prefix
emojiResults = emojiSearch ? emojiIndex.search(emojiSearch.slice(1)) : []
}
setInputValue(inputValue)
setEmojiResults(emojiResults)
setEmojiPickerActive(emojiPickerActive)
}, [useEmojis])const handleInputChange = React.useCallback(() => {
if (!inputRef.current) return
const inputValue = inputRef.current.value
const lastWord = inputValue.split(' ').pop()
const emojiPickerActive = lastWord.startsWith(':') && useEmojis
const lastEmojiIdx = emojiPickerActive ? inputValue.lastIndexOf(':') : null
const emojiSearch = emojiPickerActive ? inputValue.slice(lastEmojiIdx) : null
let emojiResults = emojiSearch ? emojiIndex.search(emojiSearch) : []
if (emojiResults.length === 0) {
// Slice the ':' prefix so we search for emojis instead of emoticons so
// ':smile' => 'smile'
// This is needed because we can also search for ':)' which requires the
// ':' prefix
emojiResults = emojiSearch ? emojiIndex.search(emojiSearch.slice(1)) : []
}
setInputValue(inputValue)
setEmojiResults(emojiResults)
setEmojiPickerActive(emojiPickerActive)
}, [useEmojis])const handleInputChange = React.useCallback(() => {
if (!inputRef.current) return
const inputValue = inputRef.current.value
const lastWord = inputValue.split(' ').pop()
const emojiPickerActive = lastWord.startsWith(':') && useEmojis
const lastEmojiIdx = emojiPickerActive ? inputValue.lastIndexOf(':') : null
const emojiSearch = emojiPickerActive ? inputValue.slice(lastEmojiIdx) : null
let emojiResults = emojiSearch ? emojiIndex.search(emojiSearch) : []
if (emojiResults.length === 0) {
// Slice the ':' prefix so we search for emojis instead of emoticons so
// ':smile' => 'smile'
// This is needed because we can also search for ':)' which requires the
// ':' prefix
emojiResults = emojiSearch ? emojiIndex.search(emojiSearch.slice(1)) : []
}
setInputValue(inputValue)
setEmojiResults(emojiResults)
setEmojiPickerActive(emojiPickerActive)
}, [useEmojis])const handleInputChange = React.useCallback(() => {
if (!inputRef.current) return
const inputValue = inputRef.current.value
const lastWord = inputValue.split(' ').pop()
const emojiPickerActive = lastWord.startsWith(':') && useEmojis
const lastEmojiIdx = emojiPickerActive ? inputValue.lastIndexOf(':') : null
const emojiSearch = emojiPickerActive ? inputValue.slice(lastEmojiIdx) : null
let emojiResults = emojiSearch ? emojiIndex.search(emojiSearch) : []
if (emojiResults.length === 0) {
// Slice the ':' prefix so we search for emojis instead of emoticons so
// ':smile' => 'smile'
// This is needed because we can also search for ':)' which requires the
// ':' prefix
emojiResults = emojiSearch ? emojiIndex.search(emojiSearch.slice(1)) : []
}
setInputValue(inputValue)
setEmojiResults(emojiResults)
setEmojiPickerActive(emojiPickerActive)
}, [useEmojis])'Activities',
'Travel & Places',
'Objects',
'Symbols',
'Flags',
]
const categories: Array<{
category: string
emojis: Array
}> = categoryOrder.map(category => ({
category,
emojis: sorted[category],
}))
// Map from EmojiMart's `id` to EmojiDatasource's object
const emojiNameMap = Object.values(emojiIndex.emojis).reduce(
(res: {[K in string]: EmojiData}, emoji: any) => {
const shortName = emoji.id
const emojiFromEmojiData = emojidata.find(e => e.short_name === shortName)
if (emojiFromEmojiData) {
res[shortName] = emojiFromEmojiData
}
return res
},
{}
)
export {categories, categoryOrder, emojiIndex, emojiNameMap}const onUpdateUserReacjis = (state: TypedState) => {
if (isMobile) {
return
}
const userReacjis = state.chat2.userReacjis
// emoji-mart expects a frequency map so we convert the sorted list from the
// service into a frequency map that will appease the lib.
let i = 0
let reacjis = {}
userReacjis.topReacjis.forEach(el => {
i++
reacjis[el] = userReacjis.topReacjis.length - i
})
store.setHandlers({
getter: key => {
switch (key) {
case 'frequently':
return reacjis
case 'last':
return reacjis[0]
case 'skin':
return userReacjis.skinTone
}
},
})
}const onUpdateUserReacjis = (state: TypedState) => {
if (isMobile) {
return
}
const userReacjis = state.chat2.userReacjis
// emoji-mart expects a frequency map so we convert the sorted list from the
// service into a frequency map that will appease the lib.
let i = 0
let reacjis = {}
userReacjis.topReacjis.forEach(el => {
i++
reacjis[el] = userReacjis.topReacjis.length - i
})
store.setHandlers({
getter: key => {
switch (key) {
case 'frequently':
return reacjis
case 'last':
return reacjis[0]
case 'skin':
return userReacjis.skinTone
}
},
})
}const emojiLib = require('emojilib');
const data = require('emoji-mart/data/all.json');
const { join, resolve } = require('path');
const { writeFileSync } = require('fs');
const { execSync } = require('child_process');
const { startCase, uniqueArray, omit, entries } = require('../core-helpers/lib');
const dir = (...paths) => resolve(__dirname, join(...paths));
const formatFile = path => execSync(`prettier ${path} --write`, { stdio: 'inherit' });
const baseEmojis = emojiLib.lib;
const enhancedEmojis = data.emojis;
const DESCRIPTION = 'a';
const KEYWORDS = 'j';
const files = {
emojis: dir('src', 'data', 'emojis.ts'),
categories: dir('src', 'data', 'categories.ts'),
};
const wrapInDefaultExport = json => `/* AUTOGENERATED FILE - DO NOT EDIT */
export default ${JSON.stringify(json, null, 2)}`;
const getStartCase = (category = '', name = '', firstKeyword = '') => {
if (category === 'flags') {
return `${name} flag`;
}
