@innoways/front-gima-locale

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