CHANGELOG.md

@@ -1,3 +1,7 @@
+### 14.0.4
+
+- fix interpolation of the count prop [1719](https://github.com/i18next/react-i18next/issues/1719)
+
 ### 14.0.3
 
 - revert changes done in v14.0.2 since it breaks normal language change render updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-i18next",
-  "version": "14.0.3",
+  "version": "14.0.4",
   "description": "Internationalization for react done right. Using the i18next i18n ecosystem.",
   "main": "dist/commonjs/index.js",
   "types": "./index.d.mts",

react-i18next.js

@@ -480,7 +480,7 @@
 	      ...i18n.options.interpolation.defaultVariables
 	    };
 	  }
-	  const interpolationOverride = values ? tOptions.interpolation : {
+	  const interpolationOverride = values || count !== undefined ? tOptions.interpolation : {
 	    interpolation: {
 	      ...tOptions.interpolation,
 	      prefix: '#$?',

src/TransWithoutContext.js

@@ -351,9 +351,10 @@ export function Trans({
         ? { ...values, ...i18n.options.interpolation.defaultVariables }
         : { ...i18n.options.interpolation.defaultVariables };
   }
-  const interpolationOverride = values
-    ? tOptions.interpolation
-    : { interpolation: { ...tOptions.interpolation, prefix: '#$?', suffix: '?$#' } };
+  const interpolationOverride =
+    values || count !== undefined
+      ? tOptions.interpolation
+      : { interpolation: { ...tOptions.interpolation, prefix: '#$?', suffix: '?$#' } };
   const combinedTOpts = {
     ...tOptions,
     count,

test/i18n.js

@@ -54,6 +54,8 @@ i18n.init({
           deepKey1: 'value1',
         },
         transTestWithSelfClosing: 'interpolated component: <component/>',
+        bracketNotation: '{{count}}',
+        otherNotation: '#$?count?$#',
       },
       other: {
         transTest1: 'Another go <1>there</1>.',

test/trans.render.spec.jsx

@@ -193,6 +193,42 @@ describe('trans simple with custom html tag', () => {
   });
 });
 
+describe('trans bracketNotation', () => {
+  function TestComponent() {
+    const numOfItems = 4;
+    return (
+      <Trans i18nKey="bracketNotation" count={numOfItems} />
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        4
+      </div>
+    `);
+  });
+});
+
+describe('trans otherNotation', () => {
+  function TestComponent() {
+    const numOfItems = 4;
+    return (
+      <Trans i18nKey="otherNotation" count={numOfItems} />
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        #$?count?$#
+      </div>
+    `);
+  });
+});
+
 describe('trans testTransKey1 singular', () => {
   function TestComponent() {
     const numOfItems = 1;