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
components Components Custom component default configuration
csp { nonce: string } Configure the nonce value of Content Security Policy
disableInlineStyles boolean Disable inline styles
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...
}
Vercel banner