// Change translation language export function changeLanguage(lng) { return i18next.changeLanguage(lng); }
set language(language) { language = language.replace(/-[a-zA-Z]{2}/, ""); if (AVAILABLE_LANGUAGES.indexOf(language) < 0) { return; } if (language === this._language) { return; } this._language = language; i18n.changeLanguage(language) }
const InternacionalizationMenu = ({ ...props }) => { const { i18n } = useTranslation() const changeLanguage = (lng) => { i18n.changeLanguage(lng) } return ( <Wrapper> <Text onClick={() => changeLanguage('ptBR')} {...props}>PT</Text> <Text onClick={() => changeLanguage('enUS')} {...props}>EN</Text> <Text onClick={() => changeLanguage('esES')} {...props}>ES</Text> </Wrapper> ) }
describe('<Features />', () => { it('should render with en translations', () => { i18next.changeLanguage('en'); shallowRenderer.render(<Features />); const renderedOutput = shallowRenderer.getRenderOutput(); expect(renderedOutput).toMatchSnapshot(); }); it('should render with de translations', () => { i18next.changeLanguage('de'); shallowRenderer.render(<Features />); const renderedOutput = shallowRenderer.getRenderOutput(); expect(renderedOutput).toMatchSnapshot(); }); it('should render different after language change', () => { i18next.changeLanguage('en'); shallowRenderer.render(<Features />); const renderedOutput1 = shallowRenderer.getRenderOutput(); i18next.changeLanguage('de'); shallowRenderer.render(<Features />); const renderedOutput2 = shallowRenderer.getRenderOutput(); expect(renderedOutput1).not.toEqual(renderedOutput2); }); });
const LanguageControls = () => { const { i18n } = useTranslation(); return ( <Fragment> <div> Current Language: {i18n.language} </div> <button onClick={() => i18n.changeLanguage('en')} > EN </button> <button onClick={() => i18n.changeLanguage('fr')} > FR </button> </Fragment> ); }
const t = await i18n; i18next.changeLanguage('en'); i18next.changeLanguage('de'); i18next.changeLanguage('en'); const languageSwitch = renderLanguageSwitch(); const radio2 = languageSwitch.queryAllByRole('radio')[1];
const handleLanguageChange = event => { const language = event.target.value; i18n.changeLanguage(language); };
console.log(i18n); function changeLang(lang){ i18n.changeLanguage(lang)
// page uses the hook function Page() { const { t, i18n } = useTranslation(); const changeLanguage = lng => { i18n.changeLanguage(lng); }; return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <Welcome /> <button onClick={() => changeLanguage('es')}>es</button> <button onClick={() => changeLanguage('en')}>en</button> </div> <div className="App-intro"> <MyComponent /> </div> <div>{t('description.part2')}</div> </div> ); }
setCurrentTranslation(currentTranslation + 1); i18n.changeLanguage(availableTranslations[currentTranslation]); }; <button onClick={() => changeLanguage()}> {buttonLabels[currentTranslation]} </button>
i18n.changeLanguage(code); }; <button type="button" onClick={() => changeLanguage('de')}> {t('translation:de')} </button> <button type="button" onClick={() => changeLanguage('en')}> {t('translation:en')} </button>
export default function App() { const { t: translate, i18n } = useTranslation(); const changeLanguage = lng => { i18n.changeLanguage(lng); }; const index = 11; return ( <div className="App"> <div className="App-header"> <h2>{translate("Welcome to React")}</h2> <button onClick={() => changeLanguage("de")}>de</button> <button onClick={() => changeLanguage("en")}>en</button> </div> <div className="App-intro"> <Trans> To get started, edit <code>src/App.js</code> and save to reload. </Trans> <Trans i18nKey="welcome">trans</Trans> <Trans>{index + 1} xxx</Trans> </div> <div style={{ marginTop: 40 }}> Learn more: <a href="https://react.i18next.com">https://react.i18next.js</a> </div> </div> ); }
// page uses the hook function Page() { const { t, i18n } = useTranslation(); const changeLanguage = lng => { i18n.changeLanguage(lng); }; return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <Welcome /> <button onClick={() => changeLanguage('es')}>es</button> <button onClick={() => changeLanguage('en')}>en</button> </div> <div className="App-intro"> <MyComponent /> </div> <div>{t('description.part2')}</div> </div> ); }
describe('<Features />', () => { it('should render with en translations', () => { i18next.changeLanguage('en'); shallowRenderer.render(<Features />); const renderedOutput = shallowRenderer.getRenderOutput(); expect(renderedOutput).toMatchSnapshot(); }); it('should render with de translations', () => { i18next.changeLanguage('de'); shallowRenderer.render(<Features />); const renderedOutput = shallowRenderer.getRenderOutput(); expect(renderedOutput).toMatchSnapshot(); }); it('should render different after language change', () => { i18next.changeLanguage('en'); shallowRenderer.render(<Features />); const renderedOutput1 = shallowRenderer.getRenderOutput(); i18next.changeLanguage('de'); shallowRenderer.render(<Features />); const renderedOutput2 = shallowRenderer.getRenderOutput(); expect(renderedOutput1).not.toEqual(renderedOutput2); }); });
const t = await i18n; i18next.changeLanguage('en'); i18next.changeLanguage('de'); i18next.changeLanguage('en'); const languageSwitch = renderLanguageSwitch(); const radio2 = languageSwitch.queryAllByRole('radio')[1];