Language Provider and context

Instalation

npm install @dcentralab/language-provider

or

yarn add @dcentralab/language-provider

Getting started

import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { LangProvider } from '@dcentralab/language-provider';
import en from './services/translate/en.json';
import langManager from './services/translate/lang-manager';
import defaultMessages from './services/translate/defaultMessages';
import RoutesWrapper from './RoutesWrapper';
import { languageChanged } from './redux/actions/languageAction';

const App = () => {
  const dispatch = useDispatch();
  const onChangeLocale = useCallback((locale, messages) => {
    langManager.changeLocale(locale, messages);
    dispatch(languageChanged(locale));
  }, [dispatch]);

  const farmConfig = useSelector((state) => state.farm.farmConfig);
  const farmUniV3Config = useSelector((state) => state.uniV3.farm);

  return (
    <LangProvider enMessages={en} locales={langManager.locales} defaultRichTextElements={defaultMessages(farmConfig, farmUniV3Config)} onChangeLocale={onChangeLocale}>
      <RoutesWrapper />
    </LangProvider>
  );
};

export default App;

Imperative usage example

import React, { useState, useCallback, useEffect } from 'react';
import { useIntl } from 'react-intl';
import { langObserver } from '@dcentralab/language-provider';
import CloseRoundedIcon from '../Icons/CloseRoundedIcon';
import './LanguageSwapper.scss';
import { LANGUAGES } from '../../../constants/general';
import {
  getBrowserLang,
  setLangSwapperClosedLS,
  isLanguageSwapperShouldOpenLS,
} from '../../../services/translate/translateService';

const LanguageSwapper = () => {
  const [visible, setVisible] = useState(isLanguageSwapperShouldOpenLS());
  const [userBrowserLang] = useState(getBrowserLang());
  const [suggestLang, setSuggestLang] = useState(getBrowserLang());
  const { locale } = useIntl(); // Current lang

  useEffect(() => {
    if (suggestLang === locale) {
      setVisible(false);
    }
    // eslint-disable-next-line
  }, []);

  const handleCloseSwapper = useCallback(() => {
    setLangSwapperClosedLS();
    setVisible(false);
  }, []);

  const handleSwapper = useCallback(() => {
    langObserver.emit('SET_LOCALE', suggestLang);
    localStorage.setItem('dufLocale', suggestLang);
    if (suggestLang !== 'en') {
      setSuggestLang('en');
    } else {
      setSuggestLang(userBrowserLang);
    }
    // eslint-disable-next-line
  }, [suggestLang]);

  return (
    visible &&
      (
        <div className="language-swapper">
          <span className="text">{LANGUAGES[suggestLang].desc}</span>
          <span className="swapper" onClick={handleSwapper}>{LANGUAGES[suggestLang].title}</span>
          <span className="close-button" onClick={handleCloseSwapper}><CloseRoundedIcon /></span>
        </div>
      )
  );
};

export default LanguageSwapper;

Props and Interfaces

export type TLanguage = (typeof langmap)[keyof typeof langmap];

export type GetLocale = () => Promise<Record<string, string> | Record<string, MessageFormatElement[]>>;

export interface ILangContext {
  [key: TLanguage]: GetLocale
}

interface ILangProvider extends IntlConfig {
  children: React.ReactNode
  locales: ILangContext
  onChangeLocale?: (locale: string, messages: Record<string, string> | Record<string, MessageFormatElement[]>) => void
}```