Ant DesignConfigProvider
ConfigProvider provides a uniform configuration support for components.
Usage#
This component provides a configuration to all React components underneath itself via the context API. In the render tree all components will have access to the provided config.
import { ConfigProvider } from 'antd';
// ...
export default () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);Content Security Policy#
Some components use dynamic style to support wave effect. You can config csp prop if Content Security Policy (CSP) is enabled:
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>Examples
Components which need localization support are listed here, you can toggle the language in the demo.
import {
ConfigProvider,
Pagination,
DatePicker,
TimePicker,
Calendar,
Popconfirm,
Table,
Modal,
Button,
Select,
Transfer,
Radio,
} from 'antd';
import enUS from 'antd/es/locale/en_US';
import zhCN from 'antd/es/locale/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 className="site-config-provider-calendar-wrapper">
<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: enUS,
};
}
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 value={locale} onChange={this.changeLocale}>
<Radio.Button key="en" value={enUS}>
English
</Radio.Button>
<Radio.Button key="cn" value={zhCN}>
中文
</Radio.Button>
</Radio.Group>
</div>
<ConfigProvider locale={locale}>
<Page
key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
/>
</ConfigProvider>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);.site-config-provider-calendar-wrapper {
width: 319px;
border: 1px solid #d9d9d9;
border-radius: 2px;
}
.locale-components {
border-top: 1px solid #d9d9d9;
padding-top: 16px;
}
.code-box-demo .example {
margin: 16px 0;
}
.code-box-demo .example > * {
margin-right: 8px;
}
.change-locale {
margin-bottom: 16px;
}Change direction of components:
Cascader example
With search:Switch example
Radio Group example
Button example
Tree example
Input (Input Group) example
Option1
Http://
.com
Select example
مورچه
مورچه
مورچه
Select a person
TreeSelect example
Please select
Modal example
Steps example
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Step 1
This is a description.
Step 2
This is a description.
Step 3
This is a description.
Rate example
* Note: Half star not implemented in RTL direction, it will be supported after rc-rate implement rtl support.
Grid System example
* Note: Every calculation in RTL grid system is from right side (offset, push, etc.)
col-8
col-8
col-6 col-offset-6
col-6 col-offset-6
col-12 col-offset-6
col-18 col-push-6
col-6 col-pull-18
Components which support rtl direction are listed here, you can toggle the direction in the demo.
import {
Input,
Col,
Row,
Select,
InputNumber,
ConfigProvider,
Cascader,
Radio,
Switch,
Tree,
TreeSelect,
Modal,
Button,
Pagination,
Steps,
Rate,
Badge,
Divider,
} from 'antd';
import {
SearchOutlined as SearchIcon,
SmileOutlined,
DownloadOutlined,
LeftOutlined,
RightOutlined,
MinusOutlined,
PlusOutlined,
} from '@ant-design/icons';
const InputGroup = Input.Group;
const ButtonGroup = Button.Group;
const { Option } = Select;
const { TreeNode } = Tree;
const { Search } = Input;
const { Step } = Steps;
const cascaderOptions = [
{
value: 'tehran',
label: 'تهران',
children: [
{
value: 'tehran-c',
label: 'تهران',
children: [
{
value: 'saadat-abad',
label: 'سعادت آیاد',
},
],
},
],
},
{
value: 'ardabil',
label: 'اردبیل',
children: [
{
value: 'ardabil-c',
label: 'اردبیل',
children: [
{
value: 'primadar',
label: 'پیرمادر',
},
],
},
],
},
{
value: 'gilan',
label: 'گیلان',
children: [
{
value: 'rasht',
label: 'رشت',
children: [
{
value: 'district-3',
label: 'منطقه ۳',
},
],
},
],
},
];
class Page extends React.Component {
state = {
currentStep: 0,
modalVisible: false,
badgeCount: 5,
showBadge: true,
};
selectBefore = (
<Select defaultValue="Http://" style={{ width: 90 }}>
<Option value="Http://">Http://</Option>
<Option value="Https://">Https://</Option>
</Select>
);
selectAfter = (
<Select defaultValue=".com" style={{ width: 80 }}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
);
// ==== Cascader ====
cascaderFilter = (inputValue, path) => {
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};
onCascaderChange = value => {
console.log(value);
};
// ==== End Cascader ====
// ==== Modal ====
showModal = () => {
this.setState({
modalVisible: true,
});
};
handleOk = e => {
console.log(e);
this.setState({
modalVisible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
modalVisible: false,
});
};
// ==== End Modal ====
onStepsChange = currentStep => {
console.log('onChange:', currentStep);
this.setState({ currentStep });
};
// ==== Badge ====
increaseBadge = () => {
const badgeCount = this.state.badgeCount + 1;
this.setState({ badgeCount });
};
declineBadge = () => {
let badgeCount = this.state.badgeCount - 1;
if (badgeCount < 0) {
badgeCount = 0;
}
this.setState({ badgeCount });
};
onChangeBadge = showBadge => {
this.setState({ showBadge });
};
// ==== End Badge ====
render() {
const { currentStep } = this.state;
return (
<div className="direction-components">
<Row>
<Col span={24}>
<Divider orientation="left">Cascader example</Divider>
<Cascader
suffixIcon={<SearchIcon />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="یک مورد انتخاب کنید"
popupPlacement={this.props.popupPlacement}
/>
With search:
<Cascader
suffixIcon={<SmileOutlined />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="Select an item"
popupPlacement={this.props.popupPlacement}
showSearch={this.cascaderFilter}
/>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Switch example</Divider>
<Switch defaultChecked />
<Switch loading defaultChecked />
<Switch size="small" loading />
</Col>
<Col span={12}>
<Divider orientation="left">Radio Group example</Divider>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">تهران</Radio.Button>
<Radio.Button value="b" disabled>
اصفهان
</Radio.Button>
<Radio.Button value="c">فارس</Radio.Button>
<Radio.Button value="d">خوزستان</Radio.Button>
</Radio.Group>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Button example</Divider>
<div className="button-demo">
<Button type="primary" icon={<DownloadOutlined />} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />}>
Download
</Button>
<br />
<Button.Group>
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Tree example</Divider>
<Tree
showLine
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0" disabled>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
<TreeNode title="leaf" key="0-0-0-1" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
</TreeNode>
</TreeNode>
</Tree>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Input (Input Group) example</Divider>
<InputGroup size="large">
<Row gutter={8}>
<Col span={5}>
<Input defaultValue="0571" />
</Col>
<Col span={8}>
<Input defaultValue="26888888" />
</Col>
</Row>
</InputGroup>
<br />
<InputGroup compact>
<Input style={{ width: '20%' }} defaultValue="0571" />
<Input style={{ width: '30%' }} defaultValue="26888888" />
</InputGroup>
<br />
<InputGroup compact>
<Select defaultValue="Option1">
<Option value="Option1">Option1</Option>
<Option value="Option2">Option2</Option>
</Select>
<Input style={{ width: '50%' }} defaultValue="input content" />
<InputNumber />
</InputGroup>
<br />
<Search placeholder="input search text" enterButton="Search" size="large" />
<br />
<br />
<div style={{ marginBottom: 16 }}>
<Input
addonBefore={this.selectBefore}
addonAfter={this.selectAfter}
defaultValue="mysite"
/>
</div>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Select example</Divider>
<Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
<Option value="jack">Jack</Option>
<Option value="مورچه">مورچه</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} disabled>
<Option value="مورچه">مورچه</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} loading>
<Option value="مورچه">مورچه</Option>
</Select>
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="سعید">سعید</Option>
<Option value="tom">Tom</Option>
</Select>
</Col>
<Col span={12}>
<Divider orientation="left">TreeSelect example</Divider>
<div>
<TreeSelect
showSearch
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode
value="sss"
title={<b style={{ color: '#08c' }}>sss</b>}
key="random3"
/>
</TreeNode>
</TreeNode>
</TreeSelect>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Modal example</Divider>
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="پنچره ساده"
visible={this.state.modalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
</Modal>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Steps example</Divider>
<div>
<Steps progressDot current={currentStep}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<br />
<Steps current={currentStep} onChange={this.onStepsChange}>
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Rate example</Divider>
<div>
<Rate defaultValue={2.5} />
<br />
<strong>* Note:</strong> Half star not implemented in RTL direction, it will be
supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
implement rtl support.
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Badge example</Divider>
<div>
<div>
<Badge count={this.state.badgeCount}>
<a href="#" className="head-example" />
</Badge>
<ButtonGroup>
<Button onClick={this.declineBadge}>
<MinusOutlined />
</Button>
<Button onClick={this.increaseBadge}>
<PlusOutlined />
</Button>
</ButtonGroup>
</div>
<div style={{ marginTop: 10 }}>
<Badge dot={this.state.showBadge}>
<a href="#" className="head-example" />
</Badge>
<Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
</div>
</div>
</Col>
</Row>
</Col>
</Row>
<br />
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Pagination example</Divider>
<Pagination showSizeChanger defaultCurrent={3} total={500} />
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Grid System example</Divider>
<div className="grid-demo">
<div className="code-box-demo">
<p>
<strong>* Note:</strong> Every calculation in RTL grid system is from right side
(offset, push, etc.)
</p>
<Row>
<Col span={8}>col-8</Col>
<Col span={8} offset={8}>
col-8
</Col>
</Row>
<Row>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
</Row>
<Row>
<Col span={12} offset={6}>
col-12 col-offset-6
</Col>
</Row>
<Row>
<Col span={18} push={6}>
col-18 col-push-6
</Col>
<Col span={6} pull={18}>
col-6 col-pull-18
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
);
}
}
class App extends React.Component {
state = {
direction: 'ltr',
popupPlacement: 'bottomLeft',
};
changeDirection = e => {
const directionValue = e.target.value;
this.setState({ direction: directionValue });
if (directionValue === 'rtl') {
this.setState({ popupPlacement: 'bottomRight' });
} else {
this.setState({ popupPlacement: 'bottomLeft' });
}
};
render() {
const { direction, popupPlacement } = this.state;
return (
<>
<div style={{ marginBottom: 16 }}>
<span style={{ marginRight: 16 }}>Change direction of components: </span>
<Radio.Group defaultValue="ltr" onChange={this.changeDirection}>
<Radio.Button key="ltr" value="ltr">
LTR
</Radio.Button>
<Radio.Button key="rtl" value="rtl">
RTL
</Radio.Button>
</Radio.Group>
</div>
<ConfigProvider direction={direction}>
<Page className={direction} popupPlacement={popupPlacement} />
</ConfigProvider>
</>
);
}
}
ReactDOM.render(<App />, mountNode);.button-demo .ant-btn,
.button-demo .ant-btn-group {
margin-right: 8px;
margin-bottom: 12px;
}
.button-demo .ant-btn-group > .ant-btn,
.button-demo .ant-btn-group > span > .ant-btn {
margin-right: 0;
margin-left: 0;
}
.head-example {
display: inline-block;
width: 42px;
height: 42px;
vertical-align: middle;
background: #eee;
border-radius: 4px;
}
.ant-badge:not(.ant-badge-not-a-wrapper) {
margin-right: 20px;
}
.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
margin-right: 0;
margin-left: 20px;
}Config component default size.
import React, { useState } from 'react';
import {
ConfigProvider,
Radio,
Input,
Button,
Select,
DatePicker,
Divider,
Table,
Card,
} from 'antd';
const FormSizeDemo = () => {
const [componentSize, setComponentSize] = useState('small');
return (
<div>
<Radio.Group
value={componentSize}
onChange={e => {
setComponentSize(e.target.value);
}}
>
<Radio.Button value="small">Small</Radio.Button>
<Radio.Button value="middle">Middle</Radio.Button>
<Radio.Button value="large">Large</Radio.Button>
</Radio.Group>
<Divider />
<ConfigProvider componentSize={componentSize}>
<div className="example">
<Input />
</div>
<div className="example">
<Input.Search allowClear />
</div>
<div className="example">
<Select defaultValue="demo" options={[{ value: 'demo' }]} />
</div>
<div className="example">
<DatePicker />
</div>
<div className="example">
<DatePicker.RangePicker />
</div>
<div className="example">
<Button>Button</Button>
</div>
<div className="example">
<Card title="Card">
<Table
columns={[
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' },
]}
dataSource={[
{
key: '1',
name: 'John Brown',
age: 32,
},
{
key: '2',
name: 'Jim Green',
age: 42,
},
{
key: '3',
name: 'Joe Black',
age: 32,
},
]}
/>
</Card>
</div>
</ConfigProvider>
</div>
);
};
ReactDOM.render(<FormSizeDemo />, mountNode);API#
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true | |
| componentSize | Config antd component size | small | middle | large | - | |
| csp | Set Content Security Policy config | { nonce: string } | - | |
| form | Set Form common props | { validateMessages?: ValidateMessages } | - | |
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
| renderEmpty | Set empty content of components. Ref Empty | function(componentName: string): ReactNode | - | |
| getPopupContainer | To set the container of the popup element. The default is to create a div element in body | function(triggerNode) | () => document.body | |
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
| locale | Language package setting, you can find the packages in antd/es/locale | object | - | |
| prefixCls | Set prefix className (cooperated with @ant-prefix) | string | ant | |
| pageHeader | Unify the ghost of PageHeader, ref PageHeader | { ghost: boolean } | true | |
| direction | Set direction of layout. See demo | ltr | rtl | ltr | |
| space | Set Space size, ref Space | { size: small | middle | large | number } | - | 4.1.0 |
| virtual | Disable virtual scroll when set to false | boolean | - | 4.3.0 |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scroll | boolean | number | - | 4.3.0 |
FAQ#
How to contribute a new language?#
Does the locale problem still exist in DatePicker even if ConfigProvider locale is used?#
Please make sure you set moment locale or that you don't have two different versions of moment.
import 'moment/locale/zh-cn';
moment.locale('zh-cn');Modal throw error when setting getPopupContainer?#
Related issue: https://github.com/ant-design/ant-design/issues/19974
When you config getPopupContainer to parentNode globally, Modal will throw error of triggerNode is undefined because it did not have a triggerNode. You can try the fix below.
<ConfigProvider
- getPopupContainer={triggerNode => triggerNode.parentNode}
+ getPopupContainer={node => {
+ if (node) {
+ return node.parentNode;
+ }
+ return document.body;
+ }}
>
<App />
</ConfigProvider>