Fix the displayName of HOC components

i18next · Mar 22, 2019 · cfc7073 · cfc7073
1 parent 61c4645
commit cfc7073
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -69,3 +69,11 @@ export function hasLoadedNamespace(ns, i18n) {
 
   return false;
 }
+
+export function getDisplayName(Component) {
+  return (
+    Component.displayName ||
+    Component.name ||
+    (typeof Component === 'string' && Component.length > 0 ? Component : 'Unknown')
+  );
+}
diff --git a/src/withSSR.js b/src/withSSR.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSSR } from './useSSR';
 import { composeInitialProps } from './context';
+import { getDisplayName } from './utils';
 
 export function withSSR() {
   return function Extend(WrappedComponent) {
@@ -13,6 +14,7 @@ export function withSSR() {
     }
 
     I18nextWithSSR.getInitialProps = composeInitialProps(WrappedComponent);
+    I18nextWithSSR.displayName = `withI18nextSSR(${getDisplayName(WrappedComponent)})`;
 
     return I18nextWithSSR;
   };

diff --git a/src/withTranslation.js b/src/withTranslation.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from './useTranslation';
+import { getDisplayName } from './utils';
 
 export function withTranslation(ns) {
   return function Extend(WrappedComponent) {
@@ -14,6 +15,10 @@ export function withTranslation(ns) {
       });
     }
 
+    I18nextWithTranslation.displayName = `withI18nextTranslation(${getDisplayName(
+      WrappedComponent,
+    )})`;
+
     return I18nextWithTranslation;
   };
 }