### Install and Start Farm Project

Source: https://ant.design/docs/react/use-with-farm

Navigates into the created Farm project directory, installs dependencies, and starts the development server. Assumes the project was created in the current directory. The application will be accessible at http://localhost:9000.

```bash
$ cd farm-project
$ npm install
$ npm start
```

--------------------------------

### Navigate and Install Dependencies

Source: https://ant.design/docs/react/use-with-vite

After creating the Vite project, navigate into the project directory and install all required dependencies using npm. This step is crucial before running the development server.

```bash
$ cd antd-demo
$ npm install
$ npm run dev
```

--------------------------------

### Start Umi Development Server

Source: https://ant.design/docs/react/use-with-umi

Command to start the Umi development server. It provides local and network URLs for accessing the running application in the browser.

```bash
npm run dev
umi dev
info  - Umi v4.0.46
        ╔════════════════════════════════════════════════════╗
        ║ App listening at:                                  ║
        ║  >   Local: http://localhost:8000                  ║
        ready - ║  > Network: http://*********:8000                  ║
        ║                                                    ║
        ║ Now you can open browser with the above addresses↑ ║
        ╚════════════════════════════════════════════════════╝
```

--------------------------------

### Create and Initialize Vite Project

Source: https://ant.design/docs/react/use-with-vite

This command initializes a new React project using Vite. It sets up the project structure and installs necessary dependencies. Ensure you have Node.js and npm installed.

```bash
$ npm create vite antd-demo
```

--------------------------------

### Initialize Umi Project with pnpm

Source: https://ant.design/docs/react/use-with-umi

Command to create a new Umi project scaffold using pnpm. It prompts the user to select an app template, npm client, and npm registry. The 'Simple App' template is recommended for starting from scratch.

```bash
mkdir myapp && cd myapp
pnpm create umi

? Pick Umi App Template › - Use arrow-keys. Return to submit.
❯   Simple App
    Ant Design Pro
    Vue Simple App

? Pick Npm Client › - Use arrow-keys. Return to submit.
    npm
    cnpm
    tnpm
    yarn
❯   pnpm

? Pick Npm Registry › - Use arrow-keys. Return to submit.
❯   npm
    taobao
```

--------------------------------

### Install Project Dependencies

Source: https://ant.design/docs/react/use-with-umi

Installs necessary dependencies for the Umi project, including official Umi plugins, Ant Design, axios for requests, and Ant Design Pro components for layout generation.

```bash
pnpm i @umijs/plugins -D
pnpm i antd axios @ant-design/pro-components -S
```

--------------------------------

### Install Refine with Ant Design Preset

Source: https://ant.design/docs/react/use-with-refine

Installs a new Refine project with the Ant Design preset using npm. This command bootstraps a project with predefined options and necessary dependencies for Ant Design integration, simplifying the setup process.

```bash
$ npm create refine-app@latest -- --preset refine-antd
```

--------------------------------

### Install Dependencies (npm)

Source: https://ant.design/docs/react/contributing

Installs all necessary project dependencies using npm. This is a prerequisite for running any development commands.

```bash
npm install
```

--------------------------------

### Install Ant Design v6 using npm, yarn, or pnpm

Source: https://ant.design/docs/react/migration-v6

These commands show how to install Ant Design version 6.x using different package managers. Ensure you have Node.js and your chosen package manager installed.

```bash
npm install --save antd@6
```

```bash
yarn add antd@6
```

```bash
pnpm add antd@6
```

--------------------------------

### Prepare Mock Product Data with Umi (TS)

Source: https://ant.design/docs/react/use-with-umi

Sets up mock data for product API endpoints using Umi's mock function. It defines mock responses for GET /api/products and DELETE /api/products/:id. This allows frontend development to proceed without a live backend. Dependencies include Umi's defineMock.

```ts
import { defineMock } from 'umi';


type Product = {
  id: string;
  name: string;
};


let products: Product[] = [
  { id: '1', name: 'Umi' },
  { id: '2', name: 'Ant Design' },
  { id: '3', name: 'Ant Design Pro' },
  { id: '4', name: 'Dva' },
];


export default defineMock({
  'GET /api/products': (_, res) => {
    res.send({
      status: 'ok',
      data: products,
    });
  },
  'DELETE /api/products/:id': (req, res) => {
    products = products.filter((item) => item.id !== req.params.id);
    res.send({ status: 'ok' });
  },
});
```

--------------------------------

### Install @ant-design/icons v6 using npm, yarn, or pnpm

Source: https://ant.design/docs/react/migration-v6

These commands illustrate how to install or upgrade the `@ant-design/icons` package to version 6.x, which is required for Ant Design v6. Use the package manager that aligns with your project setup.

```bash
npm install --save @ant-design/icons@6
```

```bash
yarn add @ant-design/icons@6
```

```bash
pnpm add @ant-design/icons@6
```

--------------------------------

### Install Dependencies (yarn)

Source: https://ant.design/docs/react/contributing

Installs all necessary project dependencies using yarn. This is a prerequisite for running any development commands.

```bash
yarn install
```

--------------------------------

### Create and Initialize Next.js App

Source: https://ant.design/docs/react/use-with-next

This command uses npx to create a new Next.js project named 'antd-demo'. It sets up the project environment and installs necessary dependencies. Ensure you have Node.js and npm (or yarn/pnpm/bun) installed.

```bash
npx create-next-app antd-demo
```

--------------------------------

### Inject Theme Tokens into Less using less-loader

Source: https://ant.design/docs/react/customize-theme

Provides an example configuration for `less-loader` to inject Ant Design theme tokens into Less stylesheets. This allows Less files to consume and utilize the design tokens defined in the theme.

```json
{
  "loader": "less-loader",
  "options": {
    "lessOptions": {
      "modifyVars": mapToken
    }
  }
}


```

--------------------------------

### Install Ant Design using npm

Source: https://ant.design/docs/react/introduce

This command installs the Ant Design React library using npm. It's a prerequisite for using antd components in your React project. Ensure you have Node.js and npm installed.

```bash
npm install antd --save
```

--------------------------------

### Install Ant Design

Source: https://ant.design/docs/react/use-with-rsbuild

Installs the Ant Design library into the Rsbuild React project. This command can be executed using npm, yarn, pnpm, or bun.

```bash
$ npm install antd --save

```

--------------------------------

### Dynamically Switch Themes in Ant Design React

Source: https://ant.design/docs/react/customize-theme

Explains the simplified dynamic theme switching in Ant Design v5 using the `theme` property of `ConfigProvider`. It allows changing theme tokens, such as `colorPrimary`, at runtime without additional configuration. The example demonstrates changing the primary color of inputs and buttons using a `ColorPicker`.

```tsx
import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
import React from 'react';

const App: React.FC = () => {
  const [primary, setPrimary] = React.useState('#1677ff');

  return (
    <>
      <ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
      <Divider />
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: primary,
          },
        }}
      >
        <Space>
          <Input placeholder="Please Input" />
          <Button type="primary">Submit</Button>
        </Space>
      </ConfigProvider>
    </>
  );
}

export default App;
```

--------------------------------

### Basic Ant Design React Example

Source: https://ant.design/docs/react/getting-started

A simple example demonstrating the usage of Ant Design React components like Button and DatePicker. It shows how to import and render these components within a React application.

```jsx
import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';

const App = () => (
  <div style={{ padding: '0 24px' }}>
    <h1>antd version: {version}</h1>
    <Space>
      <DatePicker />
      <Button type="primary">Primary Button</Button>
    </Space>
  </div>
);

export default App;
```

--------------------------------

### Import and Use Ant Design Button in React

Source: https://ant.design/docs/react/use-with-vite

This code snippet demonstrates how to import the Button component from Ant Design and use it within a React functional component. It shows a basic example of a primary button.

```jsx
import React from 'react';
import { Button } from 'antd';


const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);


export default App;
```

--------------------------------

### Getting Ant Design Component Type Definitions in TypeScript

Source: https://ant.design/docs/react/faq

This example shows how to use Ant Design's utility types in TypeScript to infer component properties and refs. It demonstrates `GetProps` for component props, `GetProp` for specific prop types, and `GetRef` for component instance refs, aiding in type-safe development with Ant Design components.

```tsx
import type { Checkbox, CheckboxProps, GetProp, GetProps, GetRef, Input } from 'antd';


// Get Props
type CheckboxGroupProps = GetProps<typeof Checkbox.Group>;


// Get Prop
type CheckboxValue = GetProp<CheckboxProps, 'value'>;


// Get Ref
type InputRef = GetRef<typeof Input>;
```

--------------------------------

### Navigate and Run Next.js Development Server

Source: https://ant.design/docs/react/use-with-next

These commands navigate into the newly created Next.js project directory and start the development server. This allows you to see the default Next.js application running in your browser.

```bash
cd antd-demo
npm run dev
```

--------------------------------

### Update UI Snapshots

Source: https://ant.design/docs/react/contributing

Updates UI snapshots for visual regression testing. Requires Docker to be installed and configured.

```bash
npm run test:image -- -u
```

--------------------------------

### Create Rsbuild React Project

Source: https://ant.design/docs/react/use-with-rsbuild

Initializes a new React project using Rsbuild. Requires Node.js and npm/yarn/pnpm/bun. Creates project structure and installs dependencies.

```bash
$ npm create rsbuild

```

```bash
$ cd demo
$ npm run dev

```

--------------------------------

### Install Next.js Registry for Ant Design SSR

Source: https://ant.design/docs/react/use-with-next

This command installs the `@ant-design/nextjs-registry` package, which is necessary for correctly handling Ant Design's server-side rendering styles when using Next.js's App Router. This helps prevent page flicker.

```bash
npm install @ant-design/nextjs-registry --save
```

--------------------------------

### Install Dependencies for CSS Extraction (Bash)

Source: https://ant.design/docs/react/server-side-rendering

This command installs necessary development dependencies for Node.js TypeScript projects, including `ts-node` for executing TypeScript files directly, `tslib` for TypeScript helper functions, and `cross-env` for setting environment variables across different operating systems.

```bash
npm install ts-node tslib cross-env --save-dev
```

--------------------------------

### Install Ant Design

Source: https://ant.design/docs/react/use-with-farm

Installs the Ant Design (antd) library as a project dependency using npm. This command adds antd to your project's package.json and downloads the library files.

```bash
$ npm install antd --save
```

--------------------------------

### Run Ant Design Website Locally (npm)

Source: https://ant.design/docs/react/contributing

Starts the Ant Design development server to view the website locally. This command is used for local development and testing.

```bash
npm start
```

--------------------------------

### Interactive Ant Design React Date Picker Example

Source: https://ant.design/docs/react/getting-started

An example showcasing an interactive Ant Design DatePicker component. It demonstrates how to manage the selected date state and display it, along with using the message component for user feedback.

```jsx
import React, { useState } from 'react';
import { DatePicker, message } from 'antd';
import { createRoot } from 'react-dom/client';


import './index.css';


const App = () => {
  const [date, setDate] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (value) => {
    messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={handleChange} />
      <div style={{ marginTop: 16 }}>
        Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
      </div>
      {contextHolder}
    </div>
  );
};


createRoot(document.getElementById('root')).render(<App />);
```

--------------------------------

### Install CSS-in-JS Package for Ant Design

Source: https://ant.design/docs/react/use-with-next

Installs the `@ant-design/cssinjs` package, which is crucial for managing Ant Design's styles within a Next.js application. Ensure the version matches the one used by antd to avoid React instance issues.

```bash
npm install @ant-design/cssinjs --save
```

--------------------------------

### Raise CSS Selector Priority with PostCSS (Example)

Source: https://ant.design/docs/react/compatible-style

This example shows how to use PostCSS plugins to raise the specificity of your application's CSS selectors. This is a workaround when disabling the :where selector, helping to ensure your custom styles override Ant Design's default styles.

```diff
--  .my-btn {
++  #root .my-btn {
      background: red;
    }
```

--------------------------------

### ComponentsConfig

Source: https://ant.design/docs/react/customize-theme

Details on how to configure individual component styles and algorithms within the `ComponentsConfig` object.

```APIDOC
## ComponentsConfig

### Description
Configure individual component tokens and alias tokens, or override component algorithms.

### Method
N/A (Configuration Object Property)

### Endpoint
N/A (Configuration Object Property)

### Parameters
#### ComponentsConfig Properties
- **`Component`** (`ComponentToken & AliasToken & { algorithm: boolean | (token: SeedToken) => MapToken }`) - Required - Modify Component Token or override Component used Alias Token. Can be any antd Component name like `Button`.
  - **algorithm** (`boolean` or `(token: SeedToken) => MapToken` or `((token: SeedToken) => MapToken)[]`) - Optional - Controls the algorithm for the component. If `false`, tokens only override global tokens. If `true`, uses global algorithm. Can also pass specific algorithms to override global ones. Default: `false`.

### Request Example
```json
{
  "Button": {
    "colorPrimary": "#fa8c16",
    "algorithm": true
  },
  "Input": {
    "padding": "8px 12px"
  }
}
```

### Response
#### Success Response (200)
N/A (Configuration Object Property)

#### Response Example
N/A (Configuration Object Property)
```

--------------------------------

### cssVar Configuration

Source: https://ant.design/docs/react/customize-theme

Configuration options for CSS variables, including prefix and key.

```APIDOC
## cssVar Configuration

### Description
Configure the prefix and unique key for CSS variables.

### Method
N/A (Configuration Object Property)

### Endpoint
N/A (Configuration Object Property)

### Parameters
#### cssVar Properties
- **prefix** (`string`) - Optional - Prefix of CSS variables, same as `prefixCls` configured on ConfigProvider by default. Default: `ant`.
- **key** (`string`) - Optional - Unique key for current theme, filled with `useId` by default. Default: `useId` in React 18.

### Request Example
```json
{
  "cssVar": {
    "prefix": "my-app",
    "key": "theme-1"
  }
}
```

### Response
#### Success Response (200)
N/A (Configuration Object Property)

#### Response Example
N/A (Configuration Object Property)
```

--------------------------------

### Run Ant Design Website Locally (yarn)

Source: https://ant.design/docs/react/contributing

Starts the Ant Design development server to view the website locally. This command is used for local development and testing.

```bash
yarn start
```

--------------------------------

### Import Ant Design Button

Source: https://ant.design/docs/react/use-with-rsbuild

Demonstrates importing and using the Button component from Ant Design in a React application. Requires Ant Design to be installed.

```tsx
import React from 'react';
import { Button } from 'antd';


const App: React.FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);


export default App;

```

--------------------------------

### Configure Routes for ProLayout in UmiJS

Source: https://ant.design/docs/react/use-with-umi

This snippet shows how to modify the `routes` configuration in `config/config.ts` to add a `name` field for each route. This name is used by ProLayout for menu rendering.

```typescript
import {
  defineConfig
} from "umi";


export default defineConfig({
  routes: [
    { path: "/", component: "index", name: "home" },
    { path: "/docs", component: "docs", name: "docs" },
    { path: "/products", component: "products", name: "products" },
  ],
  plugins: ["@umijs/plugins/dist/react-query"],
  reactQuery: {},
  npmClient: "pnpm",
});
```

--------------------------------

### Build Application with UmiJS

Source: https://ant.design/docs/react/use-with-umi

This snippet shows the command to build the UmiJS application for deployment. It also includes sample output indicating the compilation process and file sizes after gzip compression.

```bash
$ npm run build
info  - Umi v4.0.46
✔ Webpack
  Compiled successfully in 5.31s
info  - File sizes after gzip:
  122.45 kB  dist/umi.js
  575 B      dist/src__pages__products.async.js
  312 B      dist/src__pages__index.async.js
  291 B      dist/layouts__index.async.js
  100 B      dist/layouts__index.chunk.css
  55 B       dist/src__pages__products.chunk.css
event - Build index.html
```

--------------------------------

### Run Refine Development Server

Source: https://ant.design/docs/react/use-with-refine

Navigates into the created Refine project directory and starts the development server using npm. This command allows you to view the application in the browser and see the Ant Design components in action.

```bash
$ cd antd-demo
$ npm run dev
```

--------------------------------

### Create Farm React Project

Source: https://ant.design/docs/react/use-with-farm

Initializes a new React project using the Farm build tool. Requires Node.js and a package manager like npm, yarn, pnpm, or bun. Outputs a new project directory with a basic React setup.

```bash
$ npm create farm@latest
```

--------------------------------

### Apply Theme Configuration Statically and Dynamically

Source: https://ant.design/docs/react/customize-theme

Demonstrates applying a theme configuration using both the static `getDesignToken` function and the `useToken` hook. It also shows how to render a React component with the applied theme using `ConfigProvider`.

```tsx
import type { ThemeConfig } from 'antd';
import { theme } from 'antd';
import { createRoot } from 'react-dom/client';


const { getDesignToken, useToken } = theme;


const config: ThemeConfig = {
  token: {
    colorPrimary: '#1890ff',
  },
};


// By static function
const globalToken = getDesignToken(config);


// By hook
const App = () => {
  const { token } = useToken();
  return null;
};


// Example for rendering
createRoot(document.getElementById('#app')).render(
  <ConfigProvider theme={config}>
    <App />
  </ConfigProvider>,
);


```

--------------------------------

### Get Design Tokens Statically with getDesignToken

Source: https://ant.design/docs/react/customize-theme

Illustrates how to retrieve Design Tokens outside of the React component lifecycle using the static `getDesignToken` function from Ant Design's theme module. This is useful for pre-rendering or non-React contexts.

```jsx
import { theme } from 'antd';


const { getDesignToken } = theme;


const globalToken = getDesignToken();


```

--------------------------------

### Adjust Tag Margin with ConfigProvider in Ant Design v6

Source: https://ant.design/docs/react/migration-v6

v6 removes the default trailing margin from the `Tag` component. To reintroduce spacing, use the `tag.styles.root` property within `ConfigProvider` to set `marginInlineEnd`. This example demonstrates applying a margin of 8px.

```tsx
import { ConfigProvider, Tag } from 'antd';


export default () => (
  <ConfigProvider
    tag={{
      styles: {
        root: {
          marginInlineEnd: 8,
        },
      },
    }}
  >
    <Tag>Tag A</Tag>
    <Tag>Tag B</Tag>
    <Tag>Tag C</Tag>
  </ConfigProvider>
);
```

--------------------------------

### Disable Overlay Mask Blur in Ant Design v6

Source: https://ant.design/docs/react/migration-v6

v6 introduces a `mask` overlay option with a blur effect enabled by default for components like Modal and Drawer. This example shows how to disable the blur effect using `ConfigProvider` by setting `mask.blur` to `false`.

```tsx
import { ConfigProvider, Drawer, Modal } from 'antd';


export default () => (
  <ConfigProvider
    modal={{
      mask: {
        blur: false,
      },
    }}
    drawer={{
      mask: {
        blur: false,
      },
    }}
  >
    <Modal />
    <Drawer />
  </ConfigProvider>
);
```

--------------------------------

### Disable Motion Animations in Ant Design React

Source: https://ant.design/docs/react/customize-theme

Explains how to disable built-in interaction animations in Ant Design React components by setting the `motion` token to `false` within the `ConfigProvider`. This can improve performance in scenarios where animations might cause issues. The example shows checkboxes, radios, and switches with and without motion.

```tsx
import React from 'react';
import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';

const App: React.FC = () => {
  const [checked, setChecked] = React.useState<boolean>(false);
  const timerRef = React.useRef<ReturnType<typeof setInterval>>();
  React.useEffect(() => {
    timerRef.current = setInterval(() => {
      setChecked((prev) => !prev);
    }, 500);
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, []);

  const nodes = (
    <Flex gap="small">
      <Checkbox checked={checked}>Checkbox</Checkbox>
      <Radio checked={checked}>Radio</Radio>
      <Switch checked={checked} />
    </Flex>
  );

  return (
    <Row gutter={[24, 24]}>
      <Col span={24}>{nodes}</Col>
      <Col span={24}>
        <ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>
      </Col>
    </Row>
  );
};

export default App;
```

--------------------------------

### Update Form onFinish Data Handling in Ant Design v6

Source: https://ant.design/docs/react/migration-v6

In v5, `Form.List` data was included in `onFinish` even for unregistered items. v6 modifies this behavior, so `onFinish` no longer includes data from unregistered child items. This example shows the simplified `onFinish` handler in v6, removing the need for `getFieldsValue({ strict: true })`.

```diff
const onFinish = (values) => {
--    const realValues = getFieldsValue({ strict: true });
++    const realValues = values;
      // ...
    }
    <Form onFinish={onFinish} />
```

--------------------------------

### Add Navigation Link to Global Layout

Source: https://ant.design/docs/react/use-with-umi

Updates the global layout file (src/layouts/index.tsx) to include a new navigation link for the '/products' route. This ensures the new page is accessible from the application's main navigation.

```diff
<li>
  <Link to="/docs">Docs</Link>
</li>
+ <li>
+   <Link to="/products">Products</Link>
+ </li>
```

--------------------------------

### Generate New Page Route

Source: https://ant.design/docs/react/use-with-umi

Uses the Umi CLI to generate a new page component and its associated Less file for a given route path. This command simplifies the creation of new application pages.

```bash
npx umi g page products
Write: src/pages/products.tsx
Write: src/pages/products.less
```

--------------------------------

### Apply Multiple Theme Algorithms

Source: https://ant.design/docs/react/customize-theme

Shows how to combine multiple Ant Design theme algorithms, such as `darkAlgorithm` and `compactAlgorithm`, to achieve a combined theme effect. Algorithms are used to expand Seed Tokens into Map Tokens and can be applied in any combination.

```tsx
import { theme } from 'antd';


const { darkAlgorithm, compactAlgorithm } = theme;


const theme = {
  algorithm: [darkAlgorithm, compactAlgorithm],
};


```

--------------------------------

### Implement Layout Component with ProLayout in UmiJS

Source: https://ant.design/docs/react/use-with-umi

This snippet demonstrates how to create a layout component (`src/layouts/index.tsx`) using ProLayout. It fetches client routes using `useAppData` and location information using `useLocation` to configure the ProLayout, including custom `menuItemRender` for navigation.

```typescript
import {
  ProLayout
} from '@ant-design/pro-components';
import {
  Link,
  Outlet,
  useAppData,
  useLocation
} from 'umi';


export default function Layout() {
  const {
    clientRoutes
  } = useAppData();
  const location = useLocation();
  return (
    <ProLayout
      route={clientRoutes[0]}
      location={location}
      title="Umi x Ant Design"
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;
        }
        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
          return (
            <Link to={menuItemProps.path} target={menuItemProps.target}>
              {defaultDom}
            </Link>
          );
        }
        return defaultDom;
      }}>
      <Outlet />
    </ProLayout>
  );
}
```

--------------------------------

### Apply Preset Ant Design Themes (Dark, Compact) in React

Source: https://ant.design/docs/react/customize-theme

Shows how to apply preset Ant Design themes like the dark theme or a combination of dark and compact themes using the `algorithm` property within the `ConfigProvider`. This enables quick style variations for your components.

```jsx
import React from 'react';
import { Button, ConfigProvider, Input, Space, theme } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      // 1. Use dark algorithm
      algorithm: theme.darkAlgorithm,

      // 2. Combine dark algorithm and compact algorithm
      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    }}
  >
    <Space>
      <Input placeholder="Please Input" />
      <Button type="primary">Submit</Button>
    </Space>
  </ConfigProvider>
);

export default App;
```

--------------------------------

### Complete Products Page with React Query (TSX)

Source: https://ant.design/docs/react/use-with-umi

Integrates the ProductList component with data fetching and mutation logic using React Query in Umi. It fetches product data from '/api/products' using `useQuery` and handles deletion via `useMutation` which invalidates the query on completion. Dependencies include React, axios, and Umi's react-query hooks.

```tsx
import React from 'react';
import axios from 'axios';
import { useMutation, useQuery, useQueryClient } from 'umi';


import styles from './products.less';
import ProductList from '@/components/ProductList';


export default function Page() {
  const queryClient = useQueryClient();
  const productsQuery = useQuery(['products'], {
    queryFn() {
      return axios.get('/api/products').then((res) => res.data);
    },
  });
  const productsDeleteMutation = useMutation({
    mutationFn(id: string) {
      return axios.delete(`/api/products/${id}`);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
  if (productsQuery.isLoading) {
    return null;
  }
  return (
    <div>
      <h1 className={styles.title}>Page products</h1>
      <ProductList
        products={productsQuery.data.data}
        onDelete={(id) => {
          productsDeleteMutation.mutate(id);
        }}
      />
    </div>
  );
}
```

--------------------------------

### Run Test Suite (npm)

Source: https://ant.design/docs/react/contributing

Executes the complete test suite for Ant Design. Ensure NODE_ENV is unset for accurate test execution.

```bash
npm test
```

--------------------------------

### ConfigProvider Component API Adjustments

Source: https://ant.design/docs/react/migration-v6

The `dropdownMatchSelectWidth` prop in `ConfigProvider` is deprecated and replaced by `popupMatchSelectWidth`.

```APIDOC
## ConfigProvider Component API Adjustments

### Description
This section details the deprecated prop for the `ConfigProvider` component and its recommended replacement.

### Method
N/A (Configuration/Prop changes)

### Endpoint
N/A

### Parameters
#### Deprecated Props
- **dropdownMatchSelectWidth** (boolean) - Deprecated. Replaced by `popupMatchSelectWidth`.

### Request Example
```json
{
  "popupMatchSelectWidth": true
}
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
N/A
```

--------------------------------

### Configure New Route in Umi

Source: https://ant.design/docs/react/use-with-umi

Modifies the Umi configuration file (.umirc.ts) to declare a new route for the '/products' path, linking it to the 'products' component. This demonstrates manual route configuration in Umi.

```diff
import { defineConfig } from "umi";


export default defineConfig({
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
+    { path: "/products", component: "products" },
  ],
  npmClient: "pnpm",
});
```

--------------------------------

### Carousel Component API Adjustments

Source: https://ant.design/docs/react/migration-v6

The `dotPosition` prop for the Carousel component is deprecated and has been replaced by `dotPlacement`.

```APIDOC
## Carousel Component API Adjustments

### Description
This section details the deprecated prop for the Carousel component and its recommended replacement.

### Method
N/A (Configuration/Prop changes)

### Endpoint
N/A

### Parameters
#### Deprecated Props
- **dotPosition** (string) - Deprecated. Replaced by `dotPlacement`.

### Request Example
```json
{
  "dotPlacement": "bottom",
  "dots": true
}
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
N/A
```

--------------------------------

### Button Component API Adjustments

Source: https://ant.design/docs/react/migration-v6

The `iconPosition` prop for the Button component is deprecated and has been replaced by `iconPlacement`.

```APIDOC
## Button Component API Adjustments

### Description
This section details the deprecated prop for the Button component and its recommended replacement.

### Method
N/A (Configuration/Prop changes)

### Endpoint
N/A

### Parameters
#### Deprecated Props
- **iconPosition** (string) - Deprecated. Replaced by `iconPlacement`.

### Request Example
```json
{
  "iconPlacement": "right",
  "icon": "<Icon />"
}
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
N/A
```