Merge pull request #10546 from KostyaEsmukov/update_react-i18next

Updated react-i18next typings for the 1.7.0 version

react-i18next/react-i18next-tests.tsx

@@ -7,7 +7,7 @@
 import * as ReactDOM from 'react-dom';
 import * as React from 'react';
 import * as i18n from 'i18next';
-import { translate, I18nextProvider, Interpolate, InjectedTranslateProps } from 'react-i18next';
+import { translate, I18nextProvider, Interpolate, InjectedTranslateProps, TranslationFunction } from 'react-i18next';
 
 
 i18n
@@ -26,18 +26,19 @@ i18n
     });
 
 
-interface InnerAnotherComponentProps extends InjectedTranslateProps {
+interface InnerAnotherComponentProps {
+    _?: TranslationFunction;
 }
 
 class InnerAnotherComponent extends React.Component<InnerAnotherComponentProps, {}> {
     render() {
-        const { t } = this.props;
+        const { _ } = this.props;
 
-        return <p>{t('content.text', { /* options t options */ })}</p>;
+        return <p>{_('content.text', { /* options t options */ })}</p>;
     }
 }
 
-const AnotherComponent = translate('view', { wait: true })(InnerAnotherComponent);
+const AnotherComponent = translate('view', { wait: true, translateFuncName: '_' })(InnerAnotherComponent);
 
 
 
@@ -69,7 +70,20 @@ class TranslatableView extends React.Component<TranslatableViewProps, {}> {
                 <h1>{t('common:appName')}</h1>
                 <AnotherComponent />
                 <YetAnotherComponent />
-                <Interpolate parent='p' i18nKey='common:interpolateSample' value='"some value in props"' component={interpolateComponent} />
+                <Interpolate
+                    parent='p'
+                    i18nKey='common:interpolateSample'
+                    value='"some value in props"'
+                    component={interpolateComponent}
+                />
+                <Interpolate
+                    parent='p'
+                    i18nKey='common:interpolateSample'
+                    useDangerouslySetInnerHTML={true}
+                    dangerouslySetInnerHTMLPartElement='span'
+                    value='"some value in props"'
+                    component={interpolateComponent}
+                />
                 <a href='https://github.com/i18next/react-i18next' target='_blank'>{t('nav:link1')}</a>
             </div>
         )

react-i18next/react-i18next.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-i18next 1.6.3
+// Type definitions for react-i18next 1.7.0
 // Project: https://github.com/i18next/react-i18next
 // Definitions by: Kostya Esmukov <https://github.com/KostyaEsmukov>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -11,11 +11,16 @@
 declare namespace ReactI18next {
     import React = __React;
 
+    export type TranslationFunction = I18next.TranslationFunction;
+
     // Extend your component's Prop interface with this one to get access to `this.props.t`
     //
+    // Please note that if you use the `translateFuncName` option, you should create
+    // your own interface just like this one, but with your name of the translation function.
+    //
     // interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
     export interface InjectedTranslateProps {
-        t?: I18next.TranslationFunction;
+        t?: TranslationFunction;
     }
 
     interface I18nextProviderProps {
@@ -35,7 +40,10 @@ declare namespace ReactI18next {
         regexp?: RegExp;
         options?: I18next.TranslationOptions;
 
-        [regexKey: string]: InterpolateValue | RegExp | I18next.TranslationOptions;
+        useDangerouslySetInnerHTML?: boolean;
+        dangerouslySetInnerHTMLPartElement?: string;
+
+        [regexKey: string]: InterpolateValue | RegExp | I18next.TranslationOptions | boolean;
     }
 
     export class Interpolate extends React.Component<InterpolateProps, {}> { }
@@ -43,6 +51,7 @@ declare namespace ReactI18next {
     interface TranslateOptions {
         withRef?: boolean;
         wait?: boolean;
+        translateFuncName?: string;
     }
 
     export function translate(namespaces?: string[] | string, options?: TranslateOptions): <C extends Function>(WrappedComponent: C) => C;