<button onClick={() => message.success('This is a success message')}>
    Success
  </button>
  <button onClick={() => message.error('This is an error message')}>
    Error
  </button>

  <button onClick={openNotification}>Open Notification</button>

   {loading ? (
            <div>
                <Spin />
                <br/>
                <Skeleton active />
            </div>
        ) : (
            <p>Content Loaded!</p>
        )}
</div>

);
}

“`

6. Other Components

• ConfigProvider: Used for global configuration, including theming and internationalization.
• Divider: A horizontal or vertical dividing line.

“`javascript
import { ConfigProvider, Divider } from ‘antd’;

function OtherExample() {
return (

);
}
“`

This detailed overview covers the major component categories in Ant Design. Remember to consult the official Ant Design documentation for the full list of components and their API details.

Customization and Theming

Ant Design allows for extensive customization to match your brand’s aesthetic. There are several approaches to theming:

1. Using Less Variables (Recommended for Deep Customization):

Ant Design’s default styles are written in Less. You can override Less variables to customize the theme. This is the most powerful and flexible method.

• Install less and less-loader:

  bash
npm install less less-loader --save-dev
# or
yarn add less less-loader --dev

• Configure Webpack (or your bundler):

  If you’re using Create React App, you’ll need to eject or use a tool like craco to modify the Webpack configuration. Here’s an example using craco:

  1. Install craco:
     bash
npm install @craco/craco
  2. Create craco.config.js file
     “`javascript
     // craco.config.js
     const CracoLessPlugin = require(‘craco-less’);

  module.exports = {
  plugins: [
  {
  plugin: CracoLessPlugin,
  options: {
  lessLoaderOptions: {
  lessOptions: {
  modifyVars: {
  ‘@primary-color’: ‘#1DA57A’, // Change the primary color
  ‘@link-color’: ‘#1DA57A’, // Change link color
  ‘@font-size-base’: ’14px’, // Change base font size
  // Add other variable overrides here
  },
  javascriptEnabled: true,
  },
  },
  },
  },
  ],
  };

  “`

• Update package.json
  “`json
  “scripts”: {

  • “start”: “react-scripts start”,
  • “build”: “react-scripts build”,
  • “test”: “react-scripts test”,
  • “start”: “craco start”,
  • “build”: “craco build”,
  • “test”: “craco test”,
    “eject”: “react-scripts eject”
    }
    “`

• Import .less instead of .css:

  javascript
// In your component
import 'antd/dist/antd.less'; // Import the Less file
  Now, when you run your application, the overridden Less variables will be applied, changing the appearance of Ant Design components. You can find a complete list of customizable variables in the Ant Design documentation (https://ant.design/docs/react/customize-theme).

2. Using ConfigProvider (For Simple Theme Changes):

The ConfigProvider component allows you to customize some aspects of the theme directly in your JavaScript code. This is useful for smaller, dynamic changes.

“`javascript
import { ConfigProvider, Button } from ‘antd’;

function App() {
return (

Themed Button

);
}
“`

3. Using CSS Variables (Limited Customization):
Ant Design 5 and above versions uses CSS variables.
“`javascript
import { ConfigProvider, Button } from ‘antd’;

function App() {
return (

Themed Button

);
}
“`
4. Using Theme Editor (Visual Tool):

Ant Design provides an online Theme Editor (https://ant.design/theme-editor) that allows you to visually customize the theme and generate a Less variables file. This is a great way to experiment with different styles and quickly see the results.

Internationalization (i18n)

Ant Design has built-in support for internationalization. You can easily translate your application into multiple languages.

1. Import Locale Files:

   Ant Design provides locale files for various languages. Import the locale you need:

   javascript
import { ConfigProvider } from 'antd';
import enUS from 'antd/lib/locale/en_US'; // English (US)
import frFR from 'antd/lib/locale/fr_FR'; // French (France)
// ... import other locales as needed

2. Wrap with ConfigProvider:

   Wrap your application (or a part of it) with ConfigProvider and set the locale prop:

   “`javascript
   function App() {
   const [locale, setLocale] = useState(enUS);

   return (
   
   {/ Your application components /}
   
   );
   }
   “`

3. Switching Locales:

   You can dynamically change the locale by updating the locale state. For instance, you might have a language selector dropdown that updates this state.

“`javascript
import { ConfigProvider, Select } from ‘antd’;
import enUS from ‘antd/lib/locale/en_US’;
import frFR from ‘antd/lib/locale/fr_FR’;
import { useState } from ‘react’;

const { Option } = Select;

function App() {
const [locale, setLocale] = useState(enUS);

const handleLocaleChange = (value) => {
    if (value === 'fr') {
        setLocale(frFR);
    } else {
        setLocale(enUS);
    }
};
return (
    <ConfigProvider locale={locale}>
        <div>
            <Select defaultValue="en" style={{ width: 120 }} onChange={handleLocaleChange}>
                <Option value="en">English</Option>
                <Option value="fr">Français</Option>
            </Select>
             {/* Your application components */}
        </div>
    </ConfigProvider>
)

}
“`

Ant Design components will automatically use the provided locale to display text and format dates, numbers, etc.

Best Practices

• Import Only What You Need: Ant Design is modular. Import individual components (e.g., import { Button } from 'antd';) instead of the entire library to reduce bundle size.
• Use Form for Complex Forms: The Form component provides robust form management, validation, and layout features. It’s highly recommended for handling complex forms.
• Leverage ConfigProvider: Use ConfigProvider for global settings like theming and internationalization.
• Follow Ant Design’s Design Principles: Adhere to Ant Design’s design principles (Certainty, Meaningfulness, Growth, Natural) to create a consistent and user-friendly experience.
• Consult the Documentation: The Ant Design documentation is your best resource. Refer to it for detailed component APIs, examples, and troubleshooting.
• Utilize TypeScript: If you’re using TypeScript, take advantage of Ant Design’s excellent type definitions for improved code quality and developer experience.
• Consider Performance: While Ant Design is generally performant, be mindful of using very large datasets with components like Table. Use pagination, virtualization, or other techniques to optimize performance.

Advanced Topics

• Server-Side Rendering (SSR): Ant Design can be used with server-side rendering frameworks like Next.js. You’ll need to configure your SSR setup to handle CSS/Less properly.
• Custom Components: You can build your own custom components that integrate seamlessly with Ant Design. You can extend existing Ant Design