support react-i18next

[dariaboyko]

Hi guys!
I can`t understand how to add react-i18next with your i18next configuration... It might be a stupid question, sorry)

[yassinedoghri]

No worries, I haven't tried this but seeing the basic example, seems like you could try adding react-i18next as a plugin. So in your astro-i18next config:

/** @type {import('astro-i18next').AstroI18nextConfig} */
export default {
  defaultLanguage: "en",
  supportedLanguages: ["en", "fr"],
  i18next: {
    debug: true, // convenient during development to check for missing keys
    resources: {
      en: {
        translation: {
          key: "hello world",
        },
      },
      fr: {
        translation: {
          key: "bonjour le monde",
        },
      },
    },
  },
  i18nextPlugins: {
     '{initReactI18next}': "react-i18next"
  }
};

Not sure if this works though 🤔

Basically the i18nextPlugins property produces the plugin import and .use directives. And as react-i18next uses a named import to initialize, this may pose an issue.

Could you please try it? I'll work on some changes if it doesn't work.

[dariaboyko]

[aquaminer]

@yassinedoghri thanks for example, but this does not work. I change 92 line of index.ts to
i18nextInit += ".use(${key.replace('}', '').replace('{', '')})";
And your example work properly.
but i don't have idea for normalize this fix for pull request 🙃

[yassinedoghri]

@yassinedoghri thanks for example, but this does not work. I change 92 line of index.ts to i18nextInit += ".use(${key.replace('}', '').replace('{', '')})"; And your example work properly. but i don't have idea for normalize this fix for pull request upside_down_face

Oh, good one! You could use a regex instead of calling replace twice:

 i18nextInit += ".use(${key.replace(/[{}]/g, '')})";

[github-actions]

🎉 This issue has been resolved in version 1.0.0-beta.10 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀