<Trans count> prop: optional - infer count from children #1891

Author: adrai

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 16.4.0
+
+- `<Trans count>` prop: optional - infer count from children [1891](https://github.com/i18next/react-i18next/issues/1891)
+
 ### 16.3.5
 
 - fix runaway effect in useTranslation [1888](https://github.com/i18next/react-i18next/issues/1888) by [1889](https://github.com/i18next/react-i18next/pull/1889)

react-i18next.js

@@ -2441,6 +2441,19 @@
     newTarget.props = Object.assign(source.props, target.props);
     return newTarget;
   };
+  const getValuesFromChildren = children => {
+    const values = {};
+    if (!children) return values;
+    const getData = childs => {
+      const childrenArray = getAsArray(childs);
+      childrenArray.forEach(child => {
+        if (isString(child)) return;
+        if (hasChildren(child)) getData(getChildren(child));else if (isObject(child) && !React.isValidElement(child)) Object.assign(values, child);
+      });
+    };
+    getData(children);
+    return values;
+  };
   const nodesToString = (children, i18nOptions, i18n, i18nKey) => {
     if (!children) return '';
     let stringNode = '';
@@ -2753,6 +2766,10 @@
         ...i18n.options.interpolation.defaultVariables
       };
     }
+    const valuesFromChildren = getValuesFromChildren(children);
+    if (valuesFromChildren && typeof valuesFromChildren.count === 'number' && count === undefined) {
+      count = valuesFromChildren.count;
+    }
     const interpolationOverride = values || count !== undefined && !i18n.options?.interpolation?.alwaysFormat || !children ? tOptions.interpolation : {
       interpolation: {
         ...tOptions.interpolation,

react-i18next.min.js

@@ -30,6 +30,21 @@ const mergeProps = (source, target) => {
   return newTarget;
 };
 
+const getValuesFromChildren = (children) => {
+  const values = {};
+  if (!children) return values;
+  const getData = (childs) => {
+    const childrenArray = getAsArray(childs);
+    childrenArray.forEach((child) => {
+      if (isString(child)) return;
+      if (hasChildren(child)) getData(getChildren(child));
+      else if (isObject(child) && !isValidElement(child)) Object.assign(values, child);
+    });
+  };
+  getData(children);
+  return values;
+};
+
 export const nodesToString = (children, i18nOptions, i18n, i18nKey) => {
   if (!children) return '';
   let stringNode = '';
@@ -530,6 +545,14 @@ export function Trans({
         ? { ...values, ...i18n.options.interpolation.defaultVariables }
         : { ...i18n.options.interpolation.defaultVariables };
   }
+
+  const valuesFromChildren = getValuesFromChildren(children);
+
+  if (valuesFromChildren && typeof valuesFromChildren.count === 'number' && count === undefined) {
+    // eslint-disable-next-line no-param-reassign
+    count = valuesFromChildren.count;
+  }
+
   const interpolationOverride =
     values ||
     (count !== undefined && !i18n.options?.interpolation?.alwaysFormat) || // https://github.com/i18next/react-i18next/issues/1719 + https://github.com/i18next/react-i18next/issues/1801

src/TransWithoutContext.js

@@ -385,6 +385,65 @@ describe('trans complex - count only in props', () => {
   });
 });
 
+describe('trans complex - count inferred from children', () => {
+  function TestComponent() {
+    const count = 10;
+    const name = 'Jan';
+    // prettier-ignore
+    return (
+      <Trans i18nKey="transTest2">
+        Hello <strong>{{ name }}</strong>, you have {{ count }} message. Open <Link to="/msgs">here</Link>.
+      </Trans>
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Hello 
+        <strong>
+          Jan
+        </strong>
+        , you have 
+        10
+         messages. Open 
+        <a
+          href="/msgs"
+        >
+          here
+        </a>
+        .
+      </div>
+    `);
+  });
+});
+
+describe('trans with count and stuff inferred', () => {
+  function TestComponent() {
+    const count = 123;
+    const stuff = 'hey';
+    return (
+      <Trans>
+        <strong>
+          {{ count }} and {{ stuff }}
+        </strong>
+      </Trans>
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        <strong>
+          123 and hey
+        </strong>
+      </div>
+    `);
+  });
+});
+
 describe('trans complex v2 no extra pseudo elements for interpolation', () => {
   function TestComponent() {
     const count = 10;