@ant-design/pro-provider

What is @ant-design/pro-provider?

@ant-design/pro-provider is a package that provides context and hooks for managing global settings and configurations in Ant Design Pro applications. It helps in managing themes, locales, and other global states efficiently.

What are @ant-design/pro-provider's main functionalities?

ConfigProvider

The ConfigProvider component allows you to set global configurations such as theme and locale for your application. This ensures that all child components have access to these settings.

import { ConfigProvider } from '@ant-design/pro-provider';

const App = () => (
  <ConfigProvider
    value={{
      theme: 'dark',
      locale: 'en-US',
    }}
  >
    <YourComponent />
  </ConfigProvider>
);

useIntl

The useIntl hook provides internationalization support, allowing you to format messages based on the current locale.

import { useIntl } from '@ant-design/pro-provider';

const MyComponent = () => {
  const intl = useIntl();
  return <div>{intl.formatMessage({ id: 'welcome' })}</div>;
};

useTheme

The useTheme hook allows you to access the current theme and apply conditional styling based on the theme.

import { useTheme } from '@ant-design/pro-provider';

const ThemedComponent = () => {
  const theme = useTheme();
  return <div style={{ backgroundColor: theme === 'dark' ? '#000' : '#fff' }}>Themed Content</div>;
};

Other packages similar to @ant-design/pro-provider

react-intl

react-intl is a library for internationalization in React applications. It provides components and hooks for formatting dates, numbers, and strings based on the current locale. Compared to @ant-design/pro-provider, react-intl focuses solely on internationalization without additional features like theme management.

styled-components

styled-components is a library for styling React components using tagged template literals. It allows for dynamic theming and scoped styles. While @ant-design/pro-provider offers theme management as part of its broader feature set, styled-components is specialized in styling and theming.

react-context-api

react-context-api is a utility for managing global state in React applications using the Context API. It provides a simple way to create and consume context. Unlike @ant-design/pro-provider, which includes specific hooks and providers for themes and locales, react-context-api is a more general-purpose state management tool.

README

@ant-design/pro-provider

@ant-design/pro-provider.

See our website @ant-design/pro-provider for more information.

Install

Using npm:

$ npm install --save  @ant-design/pro-provider

or using yarn:

$ yarn add @ant-design/pro-provider