gatsby-theme-i18n-react-i18next

A Gatsby theme for providing localization support via react-i18next. This theme sets up react-i18next's context provider so that you can access your translations on every page. Works best together with gatsby-theme-i18n.

Usage no npm install needed!

<script type="module">
  import gatsbyThemeI18nReactI18next from 'https://cdn.skypack.dev/gatsby-theme-i18n-react-i18next';
</script>

README

gatsby-theme-i18n-react-i18next

A Gatsby theme for providing localization support via react-i18next. This theme sets up react-i18next's context provider so that you can access your translations on every page.

Installation

Note: This theme is designed to work as an add-on to gatsby-theme-i18n and will not work without it! Please follow its setup instructions before starting with these here!

  1. Install the theme and its peerDependencies.
npm install gatsby-theme-i18n-react-i18next react-i18next i18next
  1. Add the configuration to your gatsby-config.js file:
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-i18n-react-i18next`,
      options: {
        locales: `./i18n/react-i18next`,
        i18nextOptions: {
          ns: ["translation", "blog"],
        },
      },
    },
  ],
}

Usage

Place your <locale>.json files inside the directory you pointed to with locales.

You can also see an official example to learn more.

Theme options

Key Default Value Description
locales none The directory where you'll store the locales files
i18nextOptions {} You can pass in any valid i18next configuration option for the i18next instance