# @aurea-uds/react 中文文档

规范地址：https://npmcn.com/package/%40aurea-uds/react/

版本：0\.59\.0
npm 元数据更新时间：2026-11-06T16:52:09.532Z
中文译文更新时间：2026-11-07T05:04:29.849Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aurea-uds/react
原文对照：https://npmcn.com/package/%40aurea-uds/react/?lang=original
项目主页：https://github.com/victor1mor/aurea-uds/tree/main/packages/react#readme
源码仓库：https://github.com/victor1mor/aurea-uds

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：956 kB，83 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：qr ^0\.6\.0，elkjs ^0\.12\.0，react \>=19，recharts ^3\.10\.1，react-dom \>=19，@lezer/css ^1\.3\.9，codemirror ^6\.0\.2，@lezer/html ^1\.3\.13，@lezer/json ^1\.0\.3，@xyflow/react ^12\.11\.3，@codemirror/view ^6\.43\.6，@lezer/highlight ^1\.2\.3，react-day-picker ^10\.0\.1，@codemirror/state ^6\.7\.1，@lezer/javascript ^1\.5\.6，modern-screenshot ^4\.7\.0，@codemirror/language ^6\.12\.4，@tanstack/react-table ^8\.21\.3，@codemirror/legacy-modes ^6\.5\.5，@tisoap/react-flow-smart-edge ^5\.0\.0
- 首次发布：2026-07-31T11:23:08.694Z
- 最新版本发布：2026-11-06T16:52:09.332Z
- 近 30 天下载量：6278（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：75（近 12 个月 75 个）

## 中文简介

Os 组件 React da Aurea UDS. 进口@aurea-uds/fonts/csse@aurea-uds/core/css junto.

## 安装

```sh
npm install @aurea-uds/react
```

也可以使用：`pnpm add @aurea-uds/react`、`yarn add @aurea-uds/react`、`bun add @aurea-uds/react`

## README

# @aurea-uds/反应

Os 组件反应 **Aurea 通用设计系统**。 。 。 .

```bash
pnpm add @aurea-uds/react @aurea-uds/core @aurea-uds/fonts @aurea-uds/icons
```

## 乌苏

作为字体的Carregue **蚂蚁** da folha de estilo – o core não embute fonte nenhuma. 中国植物物种信息数据库.

```js
import "@aurea-uds/fonts/css";
import "@aurea-uds/core/css";
import {AureaProvider, Button, ptBR} from "@aurea-uds/react";

export default () => (
  <AureaProvider spriteUrl="/aurea-icons.svg" strings={ptBR}>
    <Button variant="primary">Enviar</Button>
  </AureaProvider>
);
```

`spriteUrl` 阿尔基沃地区 `@aurea-uds/icons` - 服务服务 (原始内容存档于2018-10-21). arquivos estáticos. enão em cada 组件 que desenha 额 icone. 香肠; `strings={ptBR}` 做为"波多克".

## 进口分类

Mas cada categoria é tumbém um 入境点 próprio, para você levar uma {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}sistema sem o reso:

```js
import {Button} from "@aurea-uds/react/actions";
```

Seis módulos trazem uma 引擎 行动 e por 如此相机 **论坛执行切入点主** 进口,嗯 `Button` 依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依

| 导入 | 时间轴: |
| --- | --- |
| `@aurea-uds/react/code-editor` | `codemirror` e os pacotes (英语) `@codemirror/*` |
| `@aurea-uds/react/data-grid` | `@tanstack/react-table` |
| `@aurea-uds/react/qrcode` | `qr` |
| `@aurea-uds/react/calendar` | `react-day-picker` |
| `@aurea-uds/react/chart` | `recharts` |
| `@aurea-uds/react/graph` | `@xyflow/react` |

### O 地图a`DependencyGraph`(e) 作为法律解释

Cada uma só é carregada quando a função dela é pedida. 中国植物物种信息数据库. Sem ela, o mapa avisa uma vez 没有控制台 e (原始内容存档于2018-10-21). segue sem a função-não quebra a tela.

| 段落 | 投资 |
| --- | --- |
| 阿尔鲁马·卡马达斯、埃尔沃雷·乌·西库洛(签名)`layout="layered"`, (中文(简体) ), `"tree"`, (中文(简体) ), `"radial"`(中文(简体) ) | `elkjs` |
| 法语:linha que desvia de um nó depois de arrumar à mão | `@tisoap/react-flow-smart-edge` |
| a foto do 映射( 图像) (`toPng()`, (中文(简体) ), `toSvg()`(中文(简体) ) | `modern-screenshot` |

**校长`layoutWorker`) (中文(简体) ).** 假马戏团 假马戏团 (原始内容存档于2018-09-29). tela por alguns segundos. O mapa aceita um trabalhador (Web Worker) que o app cria — cada empacotador 互联网档案馆的存檔,存档日期2013-12-02 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}cria trabalhador do sue jeito, e por is so quem Enterga e o app. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎样? A Aurea publica o trabalhador por um (奥雷亚公共汽车公司) 卡米尼奥德拉, `@aurea-uds/react/graph-worker`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我们来 `elkjs` (o per ocional) junto -- o app(对等逻辑) (原始内容存档于2018-10-21). não intermina o mota por fora. 无 Vite :

```js
import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";

<DependencyGraph layout="layered" layoutWorker={() => new TrabalhadorDoMapa()} … />
```

Em qualquer overro empacotador, o jeito que sempre funciona: copie (英语) `node_modules/elkjs/lib/elk-worker.min.js` pública do app e passe 的面条 `layoutWorker={() => new Worker("/elk-worker.min.js")}`。 。 。 .

## 钩子

Quatro são públicos, e e eles são a parte da API que 互联网档案馆的存檔,存档日期2013-12-02 **无目录** ○目录 文档a 组件, e chook não é 组件。 Enquanto isso não mudar, e qui que eles estão (英语:Enquanto isso não mudar, e qui que eles estão) 相當相當相當相當相當相當相當相當相當相當相當相當相當相當相當相當相當相當相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 (原始内容存档于2018-10-21). escritos.

```js
import {AureaProvider, useToast} from "@aurea-uds/react";

function BotaoSalvar() {
  const toast = useToast();                                  // dentro do AureaProvider
  return <Button onClick={() => toast.add({
    title: "Salvo",
    description: "Dois arquivos enviados.",
    type: "success",                                         // info | success | warning | danger
  })}>Salvar</Button>;
}
```

(原始内容存档于2018-03-26). A pilha se desenha sozinha: o `AureaProvider` 举起手来 `<Toaster/>` (原始内容存档于2018-09-21) (英语). para posicionar nem um segundo support para instalar.

| 钩子 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦 开胃菜 |
| --- | --- |
| `useToast()` | `add({title, description, type})`玛丝 `close(id)` e 万岁。 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}一个无所事事的基地 |
| `useAureaTheme()` | {\\fn华文楷体\\fs20\\bord1\\shad1\\1che0e0e0\\2ch000000}有相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 **开始** eixos 无 `<html>`数字 : `theme` (单位:千美元)`dark`编号 :`light`页:1 `density`。 。 。 . `theme` 国家 `null` 没有服务员——não desenhe o que diesue do tema até ele deixar de ser |
| `useAureaStrings()` | 香花之道,提供方 |
| `useSpriteUrl()` | (原始内容存档于2018-09-21) (英语). onde o sprite de ícones está sendo carregado |

## 请求

(原始内容存档于2018-09-29). React 19 ou mais novo. 无反应 19 `ref` {\\fn华文楷体\\fs16\\1che0e0e0}是的 {\\fn华文楷体\\fs16\\1che0e0e0}是的.

## 语法

阿帕奇2.0 (英语).

## 常见问题

### @aurea-uds/react 是什么？

Os 组件 React da Aurea UDS\. 进口@aurea-uds/fonts/csse@aurea-uds/core/css junto\.

### 如何安装 @aurea-uds/react？

在项目目录运行 npm install @aurea-uds/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19）、react-dom（\>=19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aurea-uds/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aurea-uds/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aurea-uds/react 可以商用吗？

@aurea-uds/react 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aurea-uds/react 的下载量有多少？

根据 npm 官方下载统计，@aurea-uds/react 在 2026/10/07 – 2026/11/05 这 30 天内被下载 6,278 次，日均约 209 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aurea-uds/react 还在维护吗？

最新版本 0\.59\.0 发布于 2026/11/07（1 天前）；至今共发布 75 个版本，其中过去 12 个月发布了 75 个；首次发布于 2026/07/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

