import {Namespace, useTranslation, UseTranslationOptions} from 'react-i18next'; import {useContext} from 'react'; import {navigate as gatsbyNavigate} from 'gatsby'; import {I18nextContext} from './i18nextContext'; import {NavigateOptions} from '@reach/router'; import {LANGUAGE_KEY} from './types'; declare var __BASE_PATH__: string | undefined; declare var __PATH_PREFIX__: string | undefined; export const useI18next = (ns?: Namespace, options?: UseTranslationOptions) => { const {i18n, t, ready} = useTranslation(ns, options); const context = useContext(I18nextContext); const {routed, defaultLanguage, generateDefaultLanguagePage} = context; const getLanguagePath = (language: string) => { return generateDefaultLanguagePage || language !== defaultLanguage ? `/${language}` : ''; }; const removePrefix = (pathname: string) => { const base = typeof __BASE_PATH__ !== `undefined` ? __BASE_PATH__ : __PATH_PREFIX__; if (base && pathname.indexOf(base) === 0) { pathname = pathname.slice(base.length); } return pathname; }; const removeLocalePart = (pathname: string) => { if (!routed) return pathname; const i = pathname.indexOf(`/`, 1); return pathname.substring(i); }; const navigate = (to: string, options?: NavigateOptions<{}>) => { const languagePath = getLanguagePath(context.language); const link = routed ? `${languagePath}${to}` : `${to}`; return gatsbyNavigate(link, options); }; const changeLanguage = (language: string, to?: string, options?: NavigateOptions<{}>) => { const languagePath = getLanguagePath(language); const pathname = to || removeLocalePart(removePrefix(window.location.pathname)); const link = `${languagePath}${pathname}${window.location.search}`; localStorage.setItem(LANGUAGE_KEY, language); return gatsbyNavigate(link, options); }; return { ...context, i18n, t, ready, navigate, changeLanguage }; };