@innoways/front-gima-locale
v1.1.4
Published
Downloads
3
Readme
useLocale
Config
npm config set @innoways:registry https://artifactory.a4apple.cn/artifactory/api/npm/npm-challenge
Installation
npm i @innoways/front-gima-use-locale @innoways/react-intl-universal
With language picker
import useLocale, {LOCALES_LIST} from "@innoways/front-gima-use-locale";
import intl from '@innoways/react-intl-universal';
export const App = () => {
const [localeInitialized, currentLocale, setCurrentLocale] = useLocale(
'https://t.17ch.cn/locales', // locale files url prefix
'workflow', // specified sub-app
'irms' // company code
);
const localeSelector = (
<select
onChange={(e) => setCurrentLocale(e.target.value)}
value={currentLocale}
>
{LOCALES_LIST.map((locale) => (
<option key={locale.value} value={locale.value}>
{locale.label}
</option>
))}
</select>
);
if (!localeInitialized) {
// 语言没加载先不渲染,或者渲染一个 Loading
return null;
}
return (
<div>
{localeSelector}
<div><button className='btn btn-blue'>{intl.get('login')}</button></div>
<div>{intl.get('welcome', { name: 'Tony', where: 'Innoways' })}</div>
<div>{intl.get('login.wrong_companycode')}</div>
</div>
);
};
Without language picker
import useLocale from '@innoways/front-gima-use-locale';
import intl from '@innoways/react-intl-universal';
export const App = () => {
const [localeInitialized] = useLocale(
'https://t.17ch.cn/locales',
'workflow',
'irms'
);
if (!localeInitialized) {
// 语言没加载先不渲染,或者渲染一个 Loading
return null;
}
return (
<div>
<div><button className='btn btn-blue'>{intl.get('login')}</button></div>
<div>{intl.get('welcome', { name: 'Tony', where: 'Innoways' })}</div>
<div>{intl.get('login.wrong_companycode')}</div>
</div>
);
};
Usage examples
import intl from 'react-intl-universal';
<div><button className='btn btn-blue'>{intl.get('login')}</button></div>
<div>{intl.get('welcome', { name: 'Tony', where: 'Innoways' })}</div>
<div>{intl.get('login.wrong_companycode')}</div>
More usage examples: https://fe-tool.com/react-intl-universal