Skip to content

multiple-languages.md

Latest commit

 

History

History
62 lines (42 loc) · 1.59 KB

multiple-languages.md

File metadata and controls

62 lines (42 loc) · 1.59 KB

Multiple languages

Because i18next is too big and it's must a wrapper for ReactJs.

So We use a general internationalization library for ReactJs (pure ReactJs). It's react-intl from formatjs(origin from Yahoo).

Before using that should be read official documents.

HOW IT WORKS

  • Update lang messages into locale/{YOUR_LANG}/*.json

  • Display this message with JSX template:

    import IntlMessages from 'components/IntlMessages';

<IntlMessages id="{MESSAGE_KEY}" />;

  • Using directly get message by id (without JSX element) with useIntlMessage(MESSAGE_ID)

    Ex:

    import useIntlMessage from 'hooks/UseIntlMessage';

<AsyncRoute
  path="/"
  asyncComponent={HomePage}
  title={useIntlMessage('page.meta.title.home')}
  description={useIntlMessage('page.meta.title.home')}
/>;

  • Using utils format functions:

    • FormattedDate
    • FormattedTime
    • FormattedNumber
    • FormattedList
    • FormattedDisplayName
    • FormattedDateParts
    • FormattedTimeParts
    • FormattedDateTimeRange ... See more from official public interface

    Ex:

      import { useIntl } from 'react-intl';

  const intl = useIntl();

  intl.formatDate(new Date();

UI component locale languages (Auto inject by AntDesign)

Ant Design components support locale languages. AUTO injected.