--- category: Components group: Other title: ConfigProvider description: Provide a uniform configuration support for components. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original --- ## Usage This component provides a configuration to all React components underneath itself via the [context API](https://react.dev/learn/passing-data-deeply-with-context). In the render tree all components will have access to the provided config. ```tsx import React from 'react'; import { ConfigProvider } from 'antd'; // ... const Demo: React.FC = () => ( ); export default Demo; ``` ### Content Security Policy {#csp} Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled: ```tsx ``` ## Examples ### Locale Components which need localization support are listed here, you can toggle the language in the demo. ```tsx import React, { useState } from 'react'; import { EllipsisOutlined } from '@ant-design/icons'; import type { ConfigProviderProps, RadioChangeEvent, TableProps, TourProps, UploadFile, } from 'antd'; import { Button, Calendar, ConfigProvider, DatePicker, Divider, Form, Image, Input, InputNumber, Modal, Pagination, Popconfirm, QRCode, Radio, Select, Space, Table, theme, TimePicker, Tour, Transfer, Upload, } from 'antd'; import enUS from 'antd/locale/en_US'; import zhCN from 'antd/locale/zh_CN'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; type Locale = ConfigProviderProps['locale']; dayjs.locale('en'); const { RangePicker } = DatePicker; const columns: TableProps['columns'] = [ { title: 'Name', dataIndex: 'name', filters: [{ text: 'filter1', value: 'filter1' }], }, { title: 'Age', dataIndex: 'age', }, ]; const Page: React.FC = () => { const { token } = theme.useToken(); const [open, setOpen] = useState(false); const [tourOpen, setTourOpen] = useState(false); const tourRefs = React.useRef([]); const showModal = () => { setOpen(true); }; const hideModal = () => { setOpen(false); }; const info = () => { Modal.info({ title: 'some info', content: 'some info', }); }; const confirm = () => { Modal.confirm({ title: 'some info', content: 'some info', }); }; const steps: TourProps['steps'] = [ { title: 'Upload File', description: 'Put your files here.', target: () => tourRefs.current[0], }, { title: 'Save', description: 'Save your changes.', target: () => tourRefs.current[1], }, { title: 'Other Actions', description: 'Click to see other actions.', target: () => tourRefs.current[2], }, ]; const fileList: UploadFile[] = [ { uid: '-1', name: 'image.png', status: 'done', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, { uid: '-2', percent: 50, name: 'image.png', status: 'uploading', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, { uid: '-3', name: 'image.png', status: 'error', }, ]; return (

Locale Modal

console.log('refresh')} />

Tour Cascader example} options={cascaderOptions} onChange={onCascaderChange} placeholder="یک مورد انتخاب کنید" placement={placement} /> With search: } options={cascaderOptions} onChange={onCascaderChange} placeholder="Select an item" placement={placement} showSearch={{ filter: cascaderFilter }} />
Switch example Radio Group example تهران اصفهان فارس خوزستان
Button example

Tree example sss} key="0-0-1-0" />
Input (Input Group) example

{selectBefore} {selectAfter}

Select example TreeSelect example sss} key="random3" />
Modal example

نگاشته‌های خود را اینجا قراردهید

Steps example

Rate example
* Note: Half star not implemented in RTL direction, it will be supported after{' '} rc-rate {' '} implement rtl support. Badge example

Pagination example
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 ); }; const App: React.FC = () => { const [direction, setDirection] = useState('ltr'); const [placement, setPlacement] = useState('bottomLeft'); const changeDirection = (e: RadioChangeEvent) => { const directionValue = e.target.value; setDirection(directionValue); setPlacement(directionValue === 'rtl' ? 'bottomRight' : 'bottomLeft'); }; return ( <>

Change direction of components: LTR RTL

); }; export default App; ``` ### Component size Config component default size. ```tsx import React, { useState } from 'react'; import { Button, Card, ConfigProvider, DatePicker, Divider, Input, Radio, Select, Space, Table, Tabs, } from 'antd'; import type { ConfigProviderProps } from 'antd'; type SizeType = ConfigProviderProps['componentSize']; const App: React.FC = () => { const [componentSize, setComponentSize] = useState('small'); return ( <> { setComponentSize(e.target.value); }} > Small Middle Large

); }; export default App; ``` ### Theme Modify theme by `theme` prop. ```tsx import React from 'react'; import { Button, ColorPicker, ConfigProvider, Divider, Form, Input, InputNumber, Space, Switch, } from 'antd'; import type { ColorPickerProps, GetProp } from 'antd'; type Color = Extract, { cleared: any }>; type ThemeData = { borderRadius: number; colorPrimary: string; Button?: { colorPrimary: string; algorithm?: boolean; }; }; const defaultData: ThemeData = { borderRadius: 6, colorPrimary: '#1677ff', Button: { colorPrimary: '#00B96B', }, }; export default () => { const [form] = Form.useForm(); const [data, setData] = React.useState(defaultData); return (

{ setData({ ...allValues, }); }} name="theme" initialValues={defaultData} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} > color.toHexString()} > color.toHexString()} >

); }; ``` ### Custom Wave Wave effect brings dynamic. Use `component` to determine which component use it. You can also use HappyProvider from [`@ant-design/happy-work-theme`](https://github.com/ant-design/happy-work-theme) to implement dynamic wave effect. ```tsx import React from 'react'; import { HappyProvider } from '@ant-design/happy-work-theme'; import { Button, ConfigProvider, Flex } from 'antd'; import type { ConfigProviderProps, GetProp } from 'antd'; type WaveConfig = GetProp; // Prepare effect holder const createHolder = (node: HTMLElement) => { const { borderWidth } = getComputedStyle(node); const borderWidthNum = Number.parseInt(borderWidth, 10); const div = document.createElement('div'); div.style.position = 'absolute'; div.style.inset = `-${borderWidthNum}px`; div.style.borderRadius = 'inherit'; div.style.background = 'transparent'; div.style.zIndex = '999'; div.style.pointerEvents = 'none'; div.style.overflow = 'hidden'; node.appendChild(div); return div; }; const createDot = (holder: HTMLElement, color: string, left: number, top: number, size = 0) => { const dot = document.createElement('div'); dot.style.position = 'absolute'; dot.style.left = `${left}px`; dot.style.top = `${top}px`; dot.style.width = `${size}px`; dot.style.height = `${size}px`; dot.style.borderRadius = '50%'; dot.style.background = color; dot.style.transform = 'translate3d(-50%, -50%, 0)'; dot.style.transition = 'all 1s ease-out'; holder.appendChild(dot); return dot; }; // Inset Effect const showInsetEffect: WaveConfig['showEffect'] = (node, { event, component }) => { if (component !== 'Button') { return; } const holder = createHolder(node); const rect = holder.getBoundingClientRect(); const left = event.clientX - rect.left; const top = event.clientY - rect.top; const dot = createDot(holder, 'rgba(255, 255, 255, 0.65)', left, top); // Motion requestAnimationFrame(() => { dot.ontransitionend = () => { holder.remove(); }; dot.style.width = '200px'; dot.style.height = '200px'; dot.style.opacity = '0'; }); }; // Shake Effect const showShakeEffect: WaveConfig['showEffect'] = (node, { component }) => { if (component !== 'Button') { return; } const seq = [0, -15, 15, -5, 5, 0]; const itv = 10; let steps = 0; const loop = () => { cancelAnimationFrame((node as any).effectTimeout); (node as any).effectTimeout = requestAnimationFrame(() => { const currentStep = Math.floor(steps / itv); const current = seq[currentStep]; const next = seq[currentStep + 1]; if (next === undefined || next === null) { node.style.transform = ''; node.style.transition = ''; return; } // Trans from current to next by itv const angle = current + ((next - current) / itv) * (steps % itv); node.style.transform = `rotate(${angle}deg)`; node.style.transition = 'none'; steps += 1; loop(); }); }; loop(); }; // Component const Wrapper: React.FC = ({ name, ...wave }) => ( ); const Demo: React.FC = () => ( ); export default Demo; ``` ### Static function Use `holderRender` to set the `Provider` for the static methods `message`,`modal`,`notification`. ```tsx import React, { useContext, useLayoutEffect } from 'react'; import { StyleProvider } from '@ant-design/cssinjs'; import { ExclamationCircleFilled } from '@ant-design/icons'; import { App, Button, ConfigProvider, message, Modal, notification, Space } from 'antd'; const Demo: React.FC = () => { const { locale, theme } = useContext(ConfigProvider.ConfigContext); useLayoutEffect(() => { ConfigProvider.config({ holderRender: (children) => ( {children} ), }); }, [locale, theme]); return (