CustomProvider

Support personalized configurations such as localization, Right to Left, and themes.

Import

MainIndividual
import { CustomProvider } from 'rsuite';

Usage

Localization 

import zhCN from 'rsuite/locales/zh_CN';

return (
  <CustomProvider locale={zhCN}>
    <App />
  </CustomProvider>
);

Right to Left 

return (
  <CustomProvider rtl>
    <App />
  </CustomProvider>
);

Themes 

return (
  <CustomProvider theme="dark">
    <App />
  </CustomProvider>
);

Global Configuration of Default Values for Components 

const components = {
  Button: {
    defaultProps: { size: 'sm' }
  },
  Input: {
    defaultProps: { size: 'sm' }
  }
  // more components...
};

return (
  <CustomProvider components={components}>
    <App />
  </CustomProvider>
);

Content Security Policy

The icon animations in @rsuite/icons use inline styles. If your project enables Content Security Policy, make sure to configure the nonce value.

return (
  <CustomProvider csp={{ nonce: 'xxxxxx' }}>
    <App />
  </CustomProvider>
);

Props

<CustomProvider>

Property Type(Default) Description Version
components Components Custom component default configuration Version 5.74.0 or above
csp { nonce: string } Configure the nonce value of Content Security Policy Version 5.73.0 or above
disableInlineStyles boolean Disable inline styles Version 5.73.0 or above
disableRipple boolean If true, the ripple effect is disabled. Affected components include: Button, Nav.Item, Pagination
formatDate (date: Date, format?: string) => string Return the formatted date string in the given format. The result may vary by locale.
locale Locale (en-GB) Configure Language Pack
parseDate (date: string, format: string) => Date Return the date parsed from string using the given format string.
rtl boolean Text and other elements go from left to right.
theme 'light' | 'dark' | 'high-contrast' Supported themes

Components 

import type { ButtonProps } from '../Button';
import type { InputProps } from '../Input';

interface ComponentProps<T> {
  defaultProps: Partial<T>;
}

export interface Components {
  Button: ComponentProps<ButtonProps>;
  Input: ComponentProps<InputProps>;
  // more components...
}