feat: 🎸 allow non-functional children in <Trans> component

streamich · Jan 8, 2019 · aa8ae78 · aa8ae78
1 parent e9c3943
commit aa8ae78
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/__stories__/Trans.story.tsx b/src/__stories__/Trans.story.tsx
@@ -28,6 +28,8 @@ storiesOf('Trans', module)
       <Trans>{({t, T}) =>
         <Demo t={t} T={T} />
       }</Trans>
+      <Trans>Hello</Trans>
+      <Trans> yo {'welcome'} ... {({t}) => t('welcome')}!</Trans>
     </Provider>
   )
   .add('Switch preloaded translations as "children" render prop', () =>

diff --git a/src/createTranslations.ts b/src/createTranslations.ts
@@ -159,7 +159,15 @@ export const createTranslations = (ns: string = 'main'): Result => {
         ? [props.ns as unknown as string]
         : undefined;
       const t = T.createT ? T.createT(nss) : defaultT;
-      return props.children({t, T}) || null;
+      if (typeof props.children === 'function') {
+        return props.children({t, T}) || null;
+      } else if(Array.isArray(props.children)) {
+        return React.createElement(React.Fragment, null, ...props.children.map(item =>
+          typeof item === 'function' ? (item as any)({t, T}) : t(item)
+        ));
+      } else {
+        return props.children || null;
+      }
     });
   };
 

diff --git a/src/types.ts b/src/types.ts
@@ -45,7 +45,8 @@ export interface ProviderState {
 
 export interface TransProps extends UniversalProps<{t: TranslatorFn, T: ProviderState}> {
   ns?: string | string[];
-  children: ({t: TranslatorFn, T: ProviderState}) => React.ReactNode;
+  // children: ({t: TranslatorFn, T: ProviderState}) => React.ReactNode;
+  children: any;
 }
 
 // React hook.