Emoji Picker
Basic usage
Shows emoji selection with search and the selected value.
<script setup lang="ts">
import { ref } from "vue";
import { NmorphEmojiPicker } from "@nmorph/nmorph-ui-kit";
import emojiLocale from "@nmorph/nmorph-ui-kit/emoji/en";
const selectedEmoji = ref("");
</script><template>
<div class="emoji-picker-basic-usage">
<NmorphEmojiPicker
language="en"
:data-source="emojiLocale.data"
:i18n="emojiLocale.i18n"
:quick-list="emojiLocale.quickList"
@select="selectedEmoji = $event"
/>
</div>
</template>Lazy Locale Data
NmorphEmojiPicker stays a renderer: pass data-source, i18n, quick-list, and language from the host wrapper. The package also ships optional locale files for en, ru, and zh that can be loaded separately.
import { loadNmorphEmojiLocale } from "@nmorph/nmorph-ui-kit/emoji"
const locale = await loadNmorphEmojiLocale(language)<NmorphEmojiPicker
:language="language"
:data-source="locale.data"
:i18n="locale.i18n"
:quick-list="locale.quickList"
/>