Internationalization

The language in the React Suite component defaults to English. If you need to set another language, you can configure it with <IntlProvider>.

Usage

import { IntlProvider } from 'rsuite';
import zhCN from 'rsuite/lib/IntlProvider/locales/zh_CN';

return (
  <IntlProvider locale={zhCN}>
    <App />
  </IntlProvider>
);

Format date

import { IntlProvider } from 'rsuite';
import ruRU from 'rsuite/lib/IntlProvider/locales/ru_RU';
import format from 'date-fns/format';
import ru from 'date-fns/locale/ru';

function formatDate(data, formatStr) {
  return format(data, formatStr, { locale: ru });
}

return (
  <IntlProvider locale={ruRU} formatDate={formatDate}>
    <App />
  </IntlProvider>
);

Supported languages

Language name Description
ar_EG Arabic
da_DK Danish
en_GB English
en_US American English
es_AR Spanish (Argentina)
es_ES Spanish (Spain)
fi_FI Finnish
it_IT Italian
ko_KR Korean
pt_BR Portuguese (Brazil)
ru_RU Russian
sv_SE Swedish
zh_CN Simplified Chinese
zh_TW traditional Chinese

Expand or modify language

You can refer to the configuration in the default language file to make a new language pack passed to the <IntlProvider> component via the locale property.

Used with react-intl

import { IntlProvider } from 'react-intl';
import LocaleProvider from 'rsuite/lib/IntlProvider';
import zhCN from 'rsuite/lib/IntlProvider/locales/zh_CN';

return (
  <IntlProvider locale="zh">
    <LocaleProvider locale={zhCN}>
      <App />
    </LocaleProvider>
  </IntlProvider>
);

More Configuration references: react-intl

Props

<IntlProvider>

Property Type(Default) Description
formatDate (date: Date ,format?: string, options?: {locale?: object;}) => string Format date
locale object(rsuite/lib/IntlProvider/locales/en_GB) Configure Language Pack
rtl boolean Text and other elements go from left to right.