@dcentralab/language-provider v1.3.34
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
}```
23 hours ago
22 hours ago
13 days ago
20 days ago
20 days ago
20 days ago
22 days ago
22 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
11 months ago
6 months ago
6 months ago
10 months ago
8 months ago
11 months ago
6 months ago
11 months ago
6 months ago
6 months ago
6 months ago
8 months ago
9 months ago
10 months ago
9 months ago
11 months ago
7 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
7 months ago
8 months ago
11 months ago
11 months ago
7 months ago
11 months ago
9 months ago
9 months ago
11 months ago
9 months ago
10 months ago
7 months ago
7 months ago
9 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
7 months ago
10 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
10 months ago
11 months ago
7 months ago
11 months ago
11 months ago
9 months ago
7 months ago
8 months ago
11 months ago
10 months ago
10 months ago
8 months ago
9 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
7 months ago
11 months ago
11 months ago