# @focus-reactive/react-yaml 中文文档

规范地址：https://npmcn.com/package/%40focus-reactive/react-yaml/

版本：1\.1\.2
npm 元数据更新时间：2026-10-27T09:21:27.837Z
中文译文更新时间：2026-11-15T03:47:55.203Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40focus-reactive/react-yaml
原文对照：https://npmcn.com/package/%40focus-reactive/react-yaml/?lang=original
项目主页：https://headless-cms-yaml-input.vercel.app/
源码仓库：https://github.com/focusreactive/headless-cms-yaml-input

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

- 包体积（解压后）：30 kB，11 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：react \*
- 首次发布：2021-09-10T17:52:27.666Z
- 最新版本发布：2022-06-23T13:04:58.486Z
- 近 30 天下载量：37203（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

有验证和语法突出显示为 React 组件的 Yaml 输入字段

## 安装

```sh
npm install @focus-reactive/react-yaml
```

也可以使用：`pnpm add @focus-reactive/react-yaml`、`yarn add @focus-reactive/react-yaml`、`bun add @focus-reactive/react-yaml`

## README

# 反应- Yaml

有验证和语法突出显示为 React 组件的 Yaml 输入字段

![Example](https://raw.githubusercontent.com/focusreactive/headless-cms-yaml-input/master/react-yaml/examples/editor-screenshort.png)

[演示](https://headless-cms-yaml-input.vercel.app/)

## 安装

```
npm i --save @focus-reactive/react-yaml
yarn add @focus-reactive/react-yaml
```

## 使用量

您可以通过 JS 对象作为初始值 :

```jsx
import YamlEditor from '@focus-reactive/react-yaml';

const obj = { foo: 'bar' };
const handleChange = ({ json, text }) => {
  console.log(json);
  // { foo: 'bar' }
};

return <YamlEditor json={obj} onChange={handleChange} />;
```

也可以用YAML语法通过文字

```jsx
import YamlEditor from '@focus-reactive/react-yaml';

const text = `
foo: bar
`;

const handleChange = ({ json, text }) => {
  console.log(text);
  // "foo: bar"
};

return <YamlEditor text={text} onChange={handleChange} />;
```

## 特征

-   可操作性( 使用 Codemiror 主题)
-   语法和出错突出显示
-   支持使用 YAML 格式的文本或常规 JS 对象
-   受控和无控模式

## API 密码

您可以将以下道具传递给 Yaml Editor

**乔森** - YAML 语法编辑器中输出的 JS 对象

**文本** - YAML语法中的文本。 注意:如果两者都通过 `json` 财务报告和审定财务报表 `text` 道具 - 对 `json` 将被使用.

**说明:** 默认情况下, 编辑器将工作于 _无控制_ 模式。 意味着: `json` 或者说 `text` 道具不会导致代码更新. 您可以控制这种行为 `merge` prop,即接受一个函数,您可以通过该函数定义如何更新编辑器中的文本.

**主题** - 解码器 样式编辑器的主题 。 譬如说.

```js
import { oneDark } from '@codemirror/theme-one-dark';
```

**变化** - 一个召回启动 **值** YAML 代码在编辑器中的更改. 发射时将采用下列参数:

```js
onChange({ json, text });
```

其中: `text` 是编辑器中最后一个有效的文本编辑, `json` 与联合来文相当.

**选择** - 文本选择时触发了调用。 发射时将采用下列参数:

```js
onSelect({ selected, from, to });
```

其中: `selected` - 是一个选中的文本, `from` 财务报告和审定财务报表 `to` - 甄选职位

**设置目录** - 当用户在编辑器中移动或设置光标时触发调用。 发射时将采用下列参数:

```js
onSetCursor({ word, from, to });
```

其中: `word` - 是一个由白空间分隔的词, `from` 财务报告和审定财务报表 `to` - 开始和结束位置

**错误** - 任何被召回 **估价** 编辑器中的代码更改。 发射时将采用下列参数:

```js
onError(errorObject | null);
```

地点 `errorObject` 是代表 YAML 语法错误的 Codemirror 错误对象。 注意在编辑器中出现用户固定语法错误后,此功能将随 `null`。 。 。 .

**合并** (可选) - 启动于 `json` 或者说 `text` 道具会变. 它可以比较新值和当前值,并返回将出现在编辑器中的结果. 发射时将采用下列参数:

```js
merge({ json, text, currentText });
```

地点 `json` - 新的json道具, `text` 新文本道具,以及 `currentText` 是当前文本.

它应该用其中的一键返回对象: `json` 或者说 `text` 它应包含js值的新文本.

默认返回 `currentText`

#### 动作 - 允许以必需的形式操纵编辑器

A. 所有行动 `ref` 道具 **之后** 编辑器保持不变:

```js
const EditorWithActions = () => {
  const actions = React.useRef(null);

  React.useEffect(() => {
    // Here we have access to imperative actions
    actions.current.replaceValue({ json: { foo: 'updatedValue' } });
  }, []);

  return (
    <div>
      <YamlEditor json={{ foo: 'initValue' }} ref={actions} />
    </div>
  );
};
```

目前可采取以下行动:

**替换值** - 用新值(json或文本)替换整个编辑器内容

```js
replaceValue({ json, text });
```

## 贷项

以 QQ 创建至 **反应** 和开源社区 [奥列格·普罗斯库林](https://twitter.com/UsulPro) 时间 [焦点反应](https://twitter.com/FocusReactive)

2021 (英语)

[![FocusReactive](https://raw.githubusercontent.com/focusreactive/storybook-graphql-kit/master/docs/focusreactive-logo.svg?sanitize=true)](https://focusreactive.com/)

## 常见问题

### @focus-reactive/react-yaml 是什么？

有验证和语法突出显示为 React 组件的 Yaml 输入字段

### 如何安装 @focus-reactive/react-yaml？

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

### @focus-reactive/react-yaml 支持 TypeScript 吗？

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

### @focus-reactive/react-yaml 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @focus-reactive/react-yaml 可以商用吗？

@focus-reactive/react-yaml 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @focus-reactive/react-yaml 的下载量有多少？

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

### @focus-reactive/react-yaml 还在维护吗？

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