import i18next , { i18n , TFunction } from 'i18next' ; import React , { ComponentType , ReactNode } from 'react' ; import wrapDisplayName from '../utils/wrapDisplayName' ; const withTranslation = ( namespace ) => ( Component ) : ComponentType => { const i18n = i18next . createInstance ( ) ; const Translated = ( props ) => < Component t = { ( key ) => `${ namespace }:${ key }` } i18n = { i18n } { ... props } />; Translated . displayName = wrapDisplayName ( Component , 'Translate' ) ; return Translated ; } ; const useTranslation = ( namespace ) : { t : TFunction ; i18n : i18n ; ready : boolean ; } => { const i18n = i18next . createInstance ( ) ; return { t : ( key ) => `${ namespace }:${ key }` , i18n , ready : true } ; } ; const I18nextProvider = ( { children } ) : ReactNode => children ; I18nextProvider . displayName = 'I18nextProvider' ; export { I18nextProvider , withTranslation , useTranslation } ;