LocaleProvider (Deprecated)

LocaleProvider component. Deprecated, please use ConfigProvider instead.

Usage#

LocaleProvider makes use of context, a feature of React, to accomplish global effectiveness by wrapping the app only once.

import { LocaleProvider } from 'antd';
import fr_FR from 'antd/es/locale-provider/fr_FR';
import moment from 'moment';
import 'moment/locale/fr';

moment.locale('fr');
...

return <LocaleProvider locale={fr_FR}><App /></LocaleProvider>;

We provide some locales like English, Chinese, Russian, German, French etc. All locale packages can be found in here.

Note: if you need to use antd's UMD dist file, please use antd/dist/antd-with-locales.js and corresponding moment locale:

const { LocaleProvider, locales } = window.antd;

...

return <LocaleProvider locale={locales.fr_FR}><App /></LocaleProvider>;

Add a new language#

If you can't find your language, you are welcome to create a locale package based on en_US and send us a pull request.

Other localization needs#

This component aims to provide localization of the built-in text. If you want to support other documents, we recommend using react-intl, refer to Intl demo 1 and Intl demo 2.

Examples

Localization

Wrap your app with LocaleProvider, and apply the corresponding language package.

expand codeexpand code
import { Pagination, LocaleProvider } from 'antd';
import zhCN from 'antd/es/locale-provider/zh_CN';

const App = () => (
  <div>
    <Pagination defaultCurrent={1} total={50} showSizeChanger />
  </div>
);

ReactDOM.render(
  <LocaleProvider locale={zhCN}>
    <App />
  </LocaleProvider>,
  mountNode,
);
Change locale of components:
~
Click to confirm
0 item

No Data

0 item

No Data

SuMoTuWeThFrSa
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
Name
Age

No Data

All components

Components which need localization support are listed here, you can toggle the language in the demo.

expand codeexpand code
import {
  LocaleProvider,
  Pagination,
  DatePicker,
  TimePicker,
  Calendar,
  Popconfirm,
  Table,
  Modal,
  Button,
  Select,
  Transfer,
  Radio,
} from 'antd';
import zhCN from 'antd/es/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('en');

const { Option } = Select;
const { RangePicker } = DatePicker;

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'filter1',
        value: 'filter1',
      },
    ],
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
];

class Page extends React.Component {
  state = {
    visible: false,
  };

  showModal = () => {
    this.setState({ visible: true });
  };

  hideModal = () => {
    this.setState({ visible: false });
  };

  render() {
    const info = () => {
      Modal.info({
        title: 'some info',
        content: 'some info',
      });
    };
    const confirm = () => {
      Modal.confirm({
        title: 'some info',
        content: 'some info',
      });
    };
    return (
      <div className="locale-components">
        <div className="example">
          <Pagination defaultCurrent={1} total={50} showSizeChanger />
        </div>
        <div className="example">
          <Select showSearch style={{ width: 200 }}>
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
          </Select>
          <DatePicker />
          <TimePicker />
          <RangePicker style={{ width: 200 }} />
        </div>
        <div className="example">
          <Button type="primary" onClick={this.showModal}>
            Show Modal
          </Button>
          <Button onClick={info}>Show info</Button>
          <Button onClick={confirm}>Show confirm</Button>
          <Popconfirm title="Question?">
            <a href="#">Click to confirm</a>
          </Popconfirm>
        </div>
        <div className="example">
          <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
        </div>
        <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
          <Calendar fullscreen={false} value={moment()} />
        </div>
        <div className="example">
          <Table dataSource={[]} columns={columns} />
        </div>
        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
          <p>Locale Modal</p>
        </Modal>
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      locale: null,
    };
  }

  changeLocale = e => {
    const localeValue = e.target.value;
    this.setState({ locale: localeValue });
    if (!localeValue) {
      moment.locale('en');
    } else {
      moment.locale('zh-cn');
    }
  };

  render() {
    const { locale } = this.state;
    return (
      <div>
        <div className="change-locale">
          <span style={{ marginRight: 16 }}>Change locale of components: </span>
          <Radio.Group defaultValue={undefined} onChange={this.changeLocale}>
            <Radio.Button key="en" value={undefined}>
              English
            </Radio.Button>
            <Radio.Button key="cn" value={zhCN}>
              中文
            </Radio.Button>
          </Radio.Group>
        </div>
        <LocaleProvider locale={locale}>
          <Page
            key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
          />
        </LocaleProvider>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
.locale-components {
  border-top: 1px solid #d9d9d9;
  padding-top: 16px;
}

.example {
  margin: 16px 0;
}

.example > * {
  margin-right: 8px;
}

.change-locale {
  margin-bottom: 16px;
}

API#

PropertyDescriptionTypeDefaultVersion
localelanguage package setting, you can find the packages in antd/es/locale-providerobject-

FAQ#

Locale problem is still existed even LocaleProvider is used?#

Please make sure you set moment locale by moment.locale('zh-cn'), or you don't have two moment of different version.

DividerMention (Deprecated)