diff --git a/package.json b/package.json index 755dfa1..a6a3044 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-input-emoji", - "version": "5.6.6", + "version": "5.6.7", "description": "A React input with an option to add an emoji with language support.", "homepage": "https://cesarwbr.github.io/react-input-emoji/", "author": "cesarwbr", diff --git a/rollup.config.js b/rollup.config.js index 04bf356..3bfb3e8 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -16,11 +16,13 @@ export default { file: pkg.main, format: 'cjs', sourcemap: true, + inlineDynamicImports: true, }, { file: pkg.module, format: 'es', sourcemap: true, + inlineDynamicImports: true, }, ], plugins: [ diff --git a/src/components/emoji-picker.js b/src/components/emoji-picker.js index 19e62d8..4c3a455 100644 --- a/src/components/emoji-picker.js +++ b/src/components/emoji-picker.js @@ -1,5 +1,5 @@ // vendors -import React, { memo, useMemo } from "react"; +import React, { memo, useEffect, useMemo, useState } from "react"; import Picker from "@emoji-mart/react"; /** @@ -42,13 +42,34 @@ function EmojiPicker(props) { return categoryies; }, [disableRecent]); - const i18n = useMemo(() => { + const [i18n, setI18n] = useState(undefined); + + useEffect(() => { if (!language) { - return undefined + // @ts-ignore + import(`@emoji-mart/data/i18n/en.json`) + .then(translations => { + setI18n(translations); + }) + .catch(error => { + console.error("Failed to load translations:", error); + }); + return; } - return require(`@emoji-mart/data/i18n/${language ?? 'en'}.json`) - }, [language]) + // @ts-ignore + import(`@emoji-mart/data/i18n/${language}.json`) + .then(translations => { + setI18n(translations); + }) + .catch(error => { + console.error("Failed to load translations:", error); + }); + }, [language]); + + if (!i18n) { + return null; + } return (