Internationalization

Internationalization guide for your application.

BuilderHack also has i18next configuration out of the box, making it easy to add internationalization to your application. You can find the configuration files in the translations folder.

translations
├── en.ts
└── es.ts

You can add more languages by creating new files in the translations folder.

translations
├── en.ts
└── es.ts

// en.ts
export default {
  welcome: "Welcome",
  goodbye: "Goodbye",
};

// es.ts
export default {
  welcome: "Bienvenido",
  goodbye: "Adiós",
};

The translations are based on the browser language settings. So the application will automatically switch to the user's preferred language if a translation file is available.

To use the translations in your components, you can use the withTranslation HOC from react-i18next.

import { withTranslation } from 'react-i18next';
    
const ParentComponent = ({ i18n }) => {

  useEffect(() => {
    i18n.changeLanguage('en');
  }, [router]);

  return (
    <div>
      <ChildComponent />
    </div>
  );
};

export default withTranslation()(ParentComponent);

const ChildComponent = ({ t }) => {
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('goodbye')}</p>
    </div>
  );
};

export default withTranslation()(ChildComponent);