LocaleProvider

LocaleProvider provides a uniform localization support for built-in text of components.

Usage#

LocaleProvider takes 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/lib/locale-provider/fr_FR';
import 'moment/locale/fr';

...

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

We provide some locale like English, Chinese, Russian, German, French and 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 for 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 enUS from 'antd/lib/locale-provider/en_US';

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

ReactDOM.render(
  <LocaleProvider locale={enUS}>
    <App />
  </LocaleProvider>
, mountNode);
Change locale of components:
~
Click to confirm
0 item
    Not Found
    0 item
      Not Found
      SuMoTuWeThFrSa
      25
      26
      27
      28
      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
      31
      01
      02
      03
      04
      05
      06
      07
      NameAge
      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/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('en');

const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

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>
    );
  }
}

let forceRerender = 0;
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() {
    return (
      <div>
        <div className="change-locale">
          <span style={{ marginRight: 16 }}>Change locale of components: </span>
          <Radio.Group defaultValue={null} onChange={this.changeLocale}>
            <Radio.Button key="en" value={null}>English</Radio.Button>
            <Radio.Button key="cn" value={zhCN}>中文</Radio.Button>
          </Radio.Group>
        </div>
        <LocaleProvider locale={this.state.locale}>
          <Page key={forceRerender++ /* HACK: just refresh in 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#

      PropertyDescriptionTypeDefault
      localelanguage package setting, you can find the packages in this path: antd/lib/locale-provider/object-