Package Exports

gatsby-theme-i18n-lingui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gatsby-theme-i18n-lingui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gatsby-theme-i18n-lingui

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

Installation

Install the theme and its peerDependencies.

npm install gatsby-theme-i18n-lingui @lingui/react

Add the configuration to your gatsby-config.js file:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-i18n-lingui`,
      options: {
        localeDir: `./i18n/lingui`,
      },
    },
  ],
}

Create a .linguirc file at the root of your project:

{
  "localeDir": "i18n/lingui",
  "srcPathDirs": ["src/"],
  "srcPathIgnorePatterns": ["__tests__"],
  "format": "po",
  "sorting": "origin",
  "extractBabelOptions": {
    "presets": [
      "babel-preset-gatsby"
    ]
  }
}

You can find all options in Lingui's documentation. Make sure that the localeDir is identical with the same option in the theme.

Add three scripts to your package.jsonfile:

"scripts": {
  "add-locale": "lingui add-locale",
  "extract": "lingui extract",
  "compile": "lingui compile"
},

Usage

Use Lingui's scripts to add locales, extract messages and compile those to messages.js files. The theme will leverage those compiled files, so make sure that you did those steps before using the theme.

You can also see an official example to learn more.

Theme options

Key	Default Value	Description
`localeDir`	none	The directory where you'll store the Lingui files