lingui · garikkh · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git a/examples/react-webpack-gettext/.babelrc b/examples/react-webpack-gettext/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["@lingui/babel-plugin-lingui-macro"]
+}
diff --git a/examples/react-webpack-gettext/.gitignore b/examples/react-webpack-gettext/.gitignore
@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/examples/react-webpack-gettext/README.md b/examples/react-webpack-gettext/README.md
@@ -0,0 +1,34 @@
+# React Webpack Po-Gettext Example
+
+This is a simple example of using React with Webpack and Lingui's po-gettext formatter for internationalization using compiled JavaScript files.
+
+## Settings/Example highlights
+
+- **PO Gettext Format**: using [po-gettext](https://lingui.dev/ref/catalog-formats#po-gettext) formatter for plurals
+- **Simple Webpack Setup**: Minimal webpack configuration for React and TypeScript
+- **Dynamic loading**: loads using JSON catalog dynamically
+
+## Getting Started
+
+1. Install dependencies:
+```bash
+yarn install
+```
+
+2. Start the development server (this will automatically extract and compile):
+```bash
+yarn start
+```
+
+The application will be available at http://localhost:3000
+
+## Building for Production
+
+```bash
+yarn build
+```
+
+## Key Configuration
+
+- **lingui.config.js**: Configures po-gettext formatter and JSON compile
+- **webpack.config.js**: Simple webpack setup with CopyWebpackPlugin to copy compiled JSON files
diff --git a/examples/react-webpack-gettext/lingui.config.js b/examples/react-webpack-gettext/lingui.config.js
@@ -0,0 +1,22 @@
+/** @type {import('@lingui/conf').LinguiConfig} */
+import { formatter } from "@lingui/format-po-gettext"
+
+const config = {
+  locales: ["en", "cs"],
+  sourceLocale: "en",
+  catalogs: [
+    {
+      path: "<rootDir>/src/locales/{locale}",
+      include: ["<rootDir>/src"],
+      exclude: ["**/node_modules/**"],
+    },
+  ],
+  format: formatter({
+    origins: true,
+    lineNumbers: true,
+    printPlaceholdersInComments: false,
+  }),
+  compileNamespace: "json",
+}
+
+export default config
diff --git a/examples/react-webpack-gettext/package.json b/examples/react-webpack-gettext/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "react-webpack-gettext-example",
+  "version": "0.1.0",
+  "description": "Simple React + Webpack + Lingui po-gettext example",
+  "private": true,
+  "main": "src/index.tsx",
+  "scripts": {
+    "start": "yarn i18n && webpack serve --mode development",
+    "build": "yarn i18n && webpack --mode production",
+    "i18n": "lingui extract && lingui compile",
+    "compile": "lingui compile"
+  },
+  "dependencies": {
+    "@lingui/core": "^5.2.0",
+    "@lingui/react": "^5.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@babel/preset-typescript": "^7.22.0",
+    "@lingui/babel-plugin-lingui-macro": "^5.2.0",
+    "@lingui/cli": "^5.2.0",
+    "@lingui/format-po-gettext": "^5.2.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "babel-loader": "^9.1.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.0",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.0",
+    "typescript": "^4.9.5",
+    "webpack": "^5.88.0",
+    "webpack-cli": "^5.1.0",
+    "webpack-dev-server": "^4.15.0"
+  }
+}
diff --git a/examples/react-webpack-gettext/public/index.html b/examples/react-webpack-gettext/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Webpack Lingui Po-Gettext Example</title>
+</head>
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+</body>
+</html>
diff --git a/examples/react-webpack-gettext/src/App.css b/examples/react-webpack-gettext/src/App.css
@@ -0,0 +1,48 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  padding: 20px;
+  color: white;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.lang-container {
+  margin: 10px 0;
+}
+
+.lang-container button {
+  margin: 0 5px;
+  padding: 10px 15px;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  background-color: #61dafb;
+  color: #282c34;
+  font-weight: bold;
+}
+
+.lang-container button:hover {
+  background-color: #21a9c7;
+}
+
+h1, h3 {
+  margin: 20px 0 10px 0;
+}
+
+div {
+  margin: 10px 0;
+}
diff --git a/examples/react-webpack-gettext/src/App.tsx b/examples/react-webpack-gettext/src/App.tsx
@@ -0,0 +1,87 @@
+import React, { useState } from "react"
+import { Trans, Plural } from "@lingui/react/macro"
+import { locales, dynamicActivate } from "./i18n"
+import { useLingui } from "@lingui/react"
+import { plural } from "@lingui/core/macro"
+import "./App.css"
+
+function App() {
+  const [count, setCount] = useState(0)
+  const { i18n } = useLingui()
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img
+          className="App-logo"
+          src="https://avatars3.githubusercontent.com/u/11225539?s=200&v=4"
+          alt="Lingui Logo"
+        />
+        <h1>
+          <Trans>React Webpack Po-Gettext Example</Trans>
+        </h1>
+
+        <h3>
+          <Trans>Language switcher example:</Trans>
+        </h3>
+        <div className="lang-container">
+          {Object.values(locales).map((locale, index) => (
+            <button
+              type="button"
+              onClick={() => dynamicActivate(Object.keys(locales)[index])}
+              key={locale}
+            >
+              {locale}
+            </button>
+          ))}
+        </div>
+
+        <h3>
+          <Trans>Plurals example:</Trans>
+        </h3>
+        <div className="lang-container">
+          <button type="button" onClick={() => setCount((state) => state + 1)}>
+            <Trans>Increment</Trans>
+          </button>
+          <button type="button" onClick={() => setCount((state) => state - 1)}>
+            <Trans>Decrement</Trans>
+          </button>
+        </div>
+
+        <div>
+          <Plural
+            value={count}
+            one={"There's one book"}
+            other={"There are # books"}
+          />
+        </div>
+
+        <div>
+          {plural(count, {
+            one: "one book",
+            other: "many books",
+          })}
+        </div>
+
+        <h3>
+          <Trans>Date formatter example:</Trans>
+        </h3>
+        <div>
+          <Trans>Today is {i18n.date(new Date(), {})}</Trans>
+        </div>
+
+        <h3>
+          <Trans>Number formatter example:</Trans>
+        </h3>
+        <div>
+          <Trans>
+            I have a balance of{" "}
+            {i18n.number(1_000_000, { style: "currency", currency: "EUR" })}
+          </Trans>
+        </div>
+      </header>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/react-webpack-gettext/src/i18n.ts b/examples/react-webpack-gettext/src/i18n.ts
@@ -0,0 +1,17 @@
+import { i18n } from "@lingui/core";
+
+export const locales = {
+  en: "English",
+  cs: "Česky",
+};
+export const defaultLocale = "en";
+
+/**
+ * We do a dynamic import of just the catalog that we need
+ * @param locale any locale string
+ */
+export async function dynamicActivate(locale: string) {
+  const { messages } = await import(`./locales/${locale}.json`);
+  i18n.load(locale, messages);
+  i18n.activate(locale);
+}
diff --git a/examples/react-webpack-gettext/src/index.tsx b/examples/react-webpack-gettext/src/index.tsx
@@ -0,0 +1,28 @@
+import React, { useEffect } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App"
+import { i18n } from "@lingui/core"
+import { I18nProvider } from "@lingui/react"
+import { defaultLocale, dynamicActivate } from "./i18n"
+
+const I18nApp = () => {
+  useEffect(() => {
+    // With this method we dynamically load the catalogs
+    dynamicActivate(defaultLocale)
+  }, [])
+
+  return (
+    <I18nProvider i18n={i18n}>
+      <App />
+    </I18nProvider>
+  )
+}
+
+const container = document.getElementById("root")
+const root = createRoot(container!)
+
+root.render(
+  <React.StrictMode>
+    <I18nApp />
+  </React.StrictMode>
+)
diff --git a/examples/react-webpack-gettext/src/locales/cs.json b/examples/react-webpack-gettext/src/locales/cs.json
@@ -0,0 +1 @@
+{"messages":{"1sDaZ6":[["count","plural",{"one":["jedna kniha"],"few":["nula knih"],"other":["mnoho knih"]}]],"2aJT27":["Dnes je ",["0"]],"IM9nhj":["Mám zůstatek ",["0"]],"JvTdAL":["Úbytek"],"ZXBDaP":["Příklad přepínače jazyků:"],"Zk/eXS":["Příklad formátovače čísel:"],"dw5/c3":["Příklad množného čísla:"],"kdkZBD":["Přírůstek"],"r3hQGU":[["count","plural",{"one":["Je tu jedna kniha"],"few":["Nejsou žádné knihy"],"other":["Existuje ","#"," knih"]}]],"r7eO9I":["Příklad formátovače data:"],"zy5RIa":["Příklad React Webpacku Po-Gettext"]}}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"messages":{"1sDaZ6":[["count","plural",{"one":["jedna kniha"],"few":["nula knih"],"other":["mnoho knih"]}]],"2aJT27":["Dnes je ",["0"]],"IM9nhj":["Mám zůstatek ",["0"]],"JvTdAL":["Úbytek"],"ZXBDaP":["Příklad přepínače jazyků:"],"Zk/eXS":["Příklad formátovače čísel:"],"dw5/c3":["Příklad množného čísla:"],"kdkZBD":["Přírůstek"],"r3hQGU":[["count","plural",{"one":["Je tu jedna kniha"],"few":["Nejsou žádné knihy"],"other":["Existuje ","#"," knih"]}]],"r7eO9I":["Příklad formátovače data:"],"zy5RIa":["Příklad React Webpacku Po-Gettext"]}}