How to use @ohif/i18n - 10 common examples

constructor(props) {
    super(props);

    this.state = {
      windowLevelData: cloneDeep(props.windowLevelData),
      hotKeysData: cloneDeep(props.hotKeysData),
      generalData: {
        currentLanguage: i18n.language.substring(0, 2),
        // TODO: list of available languages should come from i18n.options.resources
        languages: [
          {
            value: 'en',
            label: 'English',
          },
          {
            value: 'es',
            label: 'Spanish',
          },
        ],
        onChange: language => {
          this.changeLanguage(language);
        },
      },
    };

async function loadLocales() {
  // Note: We should wait for the i18n initializing
  // promise to complete before adding any new
  // resources to i18next. If the resources are added
  // to i18next before initialization is complete, the
  // backend values (e.g. those from Locize) will not
  // be loaded properly.
  try {
    await i18n.initializing;
  } catch(error) {
    throw new Error(error);
  }

  i18n.addLocales(locales);
}

onSave: ({ windowLevelData, hotkeyDefinitions, generalPreferences }) => {
      // TODO improve this strategy on windowLevel implementation
      hotkeysManager.setHotkeys(hotkeyDefinitions);

      const { language } = generalPreferences;

      // set new language
      i18n.changeLanguage(language);

      ownProps.hide();
      dispatch(
        setUserPreferences({
          windowLevelData,
          hotkeyDefinitions,
          generalPreferences,
        })
      );
    },
  };

async function loadLocales() {
  // Note: We should wait for the i18n initializing
  // promise to complete before adding any new
  // resources to i18next. If the resources are added
  // to i18next before initialization is complete, the
  // backend values (e.g. those from Locize) will not
  // be loaded properly.
  try {
    await i18n.initializing;
  } catch(error) {
    throw new Error(error);
  }

  i18n.addLocales(locales);
}

  const getCurrentLanguage = (language = i18n.language) =>
    language.split('-')[0];

  const getCurrentLanguage = (language = i18n.language) =>
    language.split('-')[0];

changeLanguage(language) {
    this.setState({
      generalData: {
        ...this.state.generalData,
        currentLanguage: language,
      },
    });

    i18n.init({
      fallbackLng: language.split('-')[0],
      lng: language,
    });
  }

const onChange = () => {
    const { value } = event.target;
    const language = getCurrentLanguage(value);
    setCurrentLanguage(language);

    i18n.init({
      fallbackLng: language,
      lng: language,
    });
  };

const onChange = () => {
    const { value } = event.target;
    const language = getCurrentLanguage(value);
    setCurrentLanguage(language);

    i18n.init({
      fallbackLng: language,
      lng: language,
    });
  };

useEffect(() => {
    let mounted = true;

    i18n.on('languageChanged', () => {
      if (mounted) {
        setCurrentLanguage(getCurrentLanguage());
      }
    });

    return () => {
      mounted = false;
    };
  }, []);