react-i18next next.js change between lang by button

Shehab Morgan answered on June 24, 2023 Popularity 1/10 Helpfulness 1/10

answer react-i18next next.js change between lang by button

related react-i18next next.js change between lang by button

react-i18next next.js change between lang by button

Comment

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('greeting', { name: 'John' })}</p>

      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('ar')}>Arabic</button>
    </div>
  );
}

export default MyComponent;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: between button javascript lang next.js react-i18next

Link to this answer
Share Copy Link

Contributed on Jun 24 2023

Shehab Morgan

0 Answers Avg Quality 2/10

Closely Related Answers

react-i18next next.js change between lang by button

Comment

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        welcome: 'Welcome',
        greeting: 'Hello, {{name}}!',
      },
    },
    ar: {
      translation: {
        welcome: 'أهلاً بك',
        greeting: 'مرحبًا، {{name}}!',
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: next.js react-i18next between button javascript lang

Link to this answer
Share Copy Link

Contributed on Jun 24 2023

Shehab Morgan

0 Answers Avg Quality 2/10

react-i18next next.js change between lang by button

Comment

import { appWithTranslation } from 'next-translate';
import { I18nextProvider } from 'react-i18next';
import i18n from '../i18n';

function MyApp({ Component, pageProps }) {
  return (
    <I18nextProvider i18n={i18n}>
      <Component {...pageProps} />
    </I18nextProvider>
  );
}

export default appWithTranslation(MyApp);

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: react-i18next between button javascript lang next.js

Link to this answer
Share Copy Link

Contributed on Jun 24 2023

Shehab Morgan

0 Answers Avg Quality 2/10

react-i18next next.js change between lang by button

Contents

More Related Answers

react-i18next next.js change between lang by button

Closely Related Answers

react-i18next next.js change between lang by button

react-i18next next.js change between lang by button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.