import React , { useCallback , useMemo , Children , ReactNode } from 'react' ; import { useSafeSetState } from '../util/hooks' ; import { TranslationContext } from './TranslationContext' ; import { I18nProvider } from '../types' ; export interface TranslationProviderProps { locale ? : string ; i18nProvider : I18nProvider ; children : ReactNode ; } interface State { locale : string ; i18nProvider : I18nProvider ; } example const TranslationProvider = ( props ) => { const { i18nProvider , children } = props ; const [ state , setState ] = useSafeSetState < State > ( { locale : i18nProvider ? i18nProvider . getLocale ( ) : 'en' , i18nProvider , } ) ; const setLocale = useCallback ( ( newLocale ) => setState ( state => ( { ... state , locale : newLocale } ) ) , [ setState ] ) ; const value = useMemo ( ( ) => ( { ... state , setLocale , } ) , [ setLocale , state ] ) ; return ( < TranslationContext . Provider value = { value } > { Children . only ( children ) } < /TranslationContext.Provider>); } ; export default TranslationProvider ;