acud/README.md

acg react 组件库

# acud acu react 组件库

## 如何使用 acud

### 安装

```bash
npm i acud
```

### 引用

```ts
import {Button, Select} from 'acud';
```

### 样式

#### 方式一：全局引用

```ts
import 'acud/dist/acud.min.css';
```

#### 方式二：webpack 插件引用

    // 在babel配置中使用babel-plugin-import插件，可实现组件和样式的按需加载。libraryDirectory也可以用'lib'
    ['import', {libraryName: 'acud', style: true, libraryDirectory: 'es'}, 'acud']

## 注意事项

### 版本兼容性说明

    支持react16、react17
    react18在严格模式下还需要调整，建议不要启用StrictMode

### React 19 兼容

由于 React 19 调整了 `react-dom` 的导出方式，导致无法直接使用 `ReactDOM.render` 方法。因而会遇到以下问题：

Modal、Toast 等组件的静态方法无效（hooks 调用方式不受影响）
因而需要通过兼容配置，使在 React 19 中正常工作。

需要在你的应用入口处自定义 render 方法：

```ts
import {createRoot} from 'react-dom/client';

import {ConfigProvider} from 'acud';

ConfigProvider.config({
    unstableRender(node, container) {
        container['_reactRoot'] ||= createRoot(container);
        const root = container['_reactRoot'];
        root.render(node);
        return async () => {
            await new Promise((resolve) => setTimeout(resolve, 0));
            root.unmount();
        };
    }
});
```