ProProvider API ProProvider (also exported as ProConfigProvider) is a configuration provider for all Pro components, allowing you to customize themes, internationalization, and global behaviors.
ProConfigProvider Child components to provide configuration to.
token
DeepPartial<ProAliasToken>
Custom design tokens for theming. Show Common Token Properties
{ colorPrimary ?: string ; borderRadius ?: number ; fontSize ?: number ; // Layout specific tokens layout ?: { sider? : { colorMenuBackground? : string ; colorTextMenu ?: string ; colorTextMenuSelected ?: string ; }; header ?: { colorBgHeader? : string ; colorHeaderTitle ?: string ; }; }; }
Enable dark mode. When enabled, automatically applies Ant Design’s dark algorithm to the theme.
Whether to use hashed CSS class names. Set to false in development for easier debugging.
CSS class prefix for Pro components.
Internationalization configuration. type IntlType = { locale : string ; getMessage : ( id : string , defaultMessage : string ) => string ; }
valueTypeMap
Record<string, ProRenderFieldPropsType>
Custom value type renderers. Show Example: Custom Value Type
< ProConfigProvider valueTypeMap = { { link: { render : ( text ) => < a href = { text } > { text } </ a > , formItemRender : ( text , props , dom ) => dom , }, } } > { children } </ ProConfigProvider >
Automatically clear SWR cache when component unmounts. Useful for preventing stale data in multi-tenant applications.
Whether to check dependencies before rendering provider. Internal optimization prop - not typically needed by users.
useIntl Hook Hook to access internationalization within Pro components.
import { useIntl } from '@ant-design/pro-components' ; const MyComponent = () => { const intl = useIntl (); return ( < div > { intl . getMessage ( 'app.welcome' , 'Welcome' ) } </ div > ); };
IntlType Current locale (e.g., ‘en-US’, ‘zh-CN’).
Get internationalized message. ( id : string , defaultMessage ?: string ) => string
ProRenderFieldPropsType Type for custom value type renderers.
Render function for read mode. ( text : any , props : ProFieldFCRenderProps , dom : React . JSX . Element ) => React . JSX . Element
Render function for edit mode. ( text : any , props : ProFieldFCRenderProps , dom : React . JSX . Element ) => React . JSX . Element
BaseProFieldFC Base type for field components.
mode
'read' | 'edit' | 'update'
Render mode.
Props for the underlying component.
valueEnum
Record<string, any> | Map<string, any>
Value enumeration.
Unique key for the field.
ProSchemaValueEnumType Type for value enum items.
type ProSchemaValueEnumType = { text : React . ReactNode ; status ?: string ; color ?: string ; disabled ?: boolean ; }
Predefined status color. Options: Success, Processing, Default, Error, Warning
Custom color (overrides status).
Whether the option is disabled.
Usage Examples Basic Setup
Dark Mode
Custom Theme
Custom Value Type
Internationalization
Auto Clear Cache
import { ProConfigProvider } from '@ant-design/pro-components' ; import { ConfigProvider } from 'antd' ; import enUS from 'antd/es/locale/en_US' ; export default () => ( < ConfigProvider locale = { enUS } > < ProConfigProvider > < App /> </ ProConfigProvider > </ ConfigProvider > ) ;
import { ProConfigProvider } from '@ant-design/pro-components' ; import { useState } from 'react' ; export default () => { const [ dark , setDark ] = useState ( false ); return ( < ProConfigProvider dark = { dark } > < Switch checked = { dark } onChange = { setDark } checkedChildren = "Dark" unCheckedChildren = "Light" /> < App /> </ ProConfigProvider > ); };
< ProConfigProvider token = { { colorPrimary: '#1890ff' , borderRadius: 4 , layout: { sider: { colorMenuBackground: '#001529' , colorTextMenu: 'rgba(255, 255, 255, 0.65)' , colorTextMenuSelected: '#fff' , }, }, } } > < App /> </ ProConfigProvider >
import { ProConfigProvider } from '@ant-design/pro-components' ; import { Tag } from 'antd' ; < ProConfigProvider valueTypeMap = { { // Custom 'tag' value type tag: { render : ( text , props ) => { const { fieldProps } = props ; return ( < Tag color = { fieldProps ?. color } > { text } </ Tag > ); }, formItemRender : ( text , props , dom ) => dom , }, // Custom 'link' value type link: { render : ( text ) => ( < a href = { text } target = "_blank" rel = "noopener" > { text } </ a > ), formItemRender : ( text , props , dom ) => dom , }, } } > { /* Now you can use these custom types */ } < ProTable columns = { [ { title: 'Status' , dataIndex: 'status' , valueType: 'tag' , fieldProps: { color: 'blue' }, }, { title: 'Website' , dataIndex: 'url' , valueType: 'link' , }, ] } /> </ ProConfigProvider >
import { ProConfigProvider , useIntl } from '@ant-design/pro-components' ; import { ConfigProvider } from 'antd' ; import zhCN from 'antd/es/locale/zh_CN' ; import enUS from 'antd/es/locale/en_US' ; const intlMap = { 'en-US' : { locale: 'en-US' , getMessage : ( id , defaultMessage ) => { const messages = { 'app.welcome' : 'Welcome' , 'app.logout' : 'Logout' , }; return messages [ id ] || defaultMessage ; }, }, 'zh-CN' : { locale: 'zh-CN' , getMessage : ( id , defaultMessage ) => { const messages = { 'app.welcome' : '欢迎' , 'app.logout' : '退出' , }; return messages [ id ] || defaultMessage ; }, }, }; export default () => { const [ locale , setLocale ] = useState ( 'en-US' ); return ( < ConfigProvider locale = { locale === 'zh-CN' ? zhCN : enUS } > < ProConfigProvider intl = { intlMap [ locale ] } > < App /> </ ProConfigProvider > </ ConfigProvider > ); }; // Inside components const MyComponent = () => { const intl = useIntl (); return < div > { intl . getMessage ( 'app.welcome' , 'Welcome' ) } </ div > ; };
// Useful for multi-tenant applications < ProConfigProvider autoClearCache > < App /> </ ProConfigProvider >
Best Practices
Place at root : Put ProConfigProvider at the root of your application, wrapping all Pro components.
Combine with ConfigProvider : Use together with Ant Design’s ConfigProvider for consistent theming.
Theme tokens : Customize token prop to match your brand colors and spacing.
Dark mode : Use the dark prop to toggle dark mode - it automatically applies the correct theme algorithm.
Custom value types : Register custom value types via valueTypeMap to reuse across all Pro components.
Internationalization : Provide intl configuration for multi-language support.
Performance : Enable autoClearCache in multi-tenant apps to prevent data leakage between tenants.