# @docuseal/signature-maker-react 中文文档

规范地址：https://npmcn.com/package/%40docuseal/signature-maker-react/

版本：1\.1\.0
npm 元数据更新时间：2026-11-10T17:51:56.562Z
中文译文更新时间：2026-11-12T14:26:08.642Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40docuseal/signature-maker-react
原文对照：https://npmcn.com/package/%40docuseal/signature-maker-react/?lang=original
项目主页：https://github.com/docusealco/signature-maker-react#readme
源码仓库：https://github.com/docusealco/signature-maker-react

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

- 包体积（解压后）：13.1 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：1 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2024-09-17T15:37:25.601Z
- 最新版本发布：2026-11-10T17:51:56.353Z
- 近 30 天下载量：38919（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 1 个）

## 中文简介

用于绘图、打字和上传签名的响应组件

## 安装

```sh
npm install @docuseal/signature-maker-react
```

也可以使用：`pnpm add @docuseal/signature-maker-react`、`yarn add @docuseal/signature-maker-react`、`bun add @docuseal/signature-maker-react`

## README

[![Signature Maker](https://github.com/user-attachments/assets/305904a9-291f-416d-ac32-baaf22970450)](https://www.docuseal.com/online-signature)

# 签名制作者反应

反应组件,让用户绘制,打入或上传他们的签名,并作为PNG返回. 一个薄薄的包裹围绕 [签名制作者-js](https://github.com/docusealco/signature-maker-js) 网页组件.

[现场演示](https://www.docuseal.com/online-signature) • 妇女 [文档](https://www.docuseal.com/docs/embedded/signature#react) • 妇女 [联合来文](https://github.com/docusealco/signature-maker-js) • 妇女 [阴道](https://github.com/docusealco/signature-maker-vue)

## 安装

```bash
npm install @docuseal/signature-maker-react
# or
yarn add @docuseal/signature-maker-react
```

要求反应18或19. 用于服务器侧渲染的工作.

## 使用量

不需要处理器: 提交按钮将签名下载为 PNG .

```jsx
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  return <SignatureMaker downloadOnSave={true} />
}
```

用户点击时处理签名 提交 :

```jsx
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  const handleSave = (detail) => {
    fetch('/save-signature', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ file: detail.base64 }),
    })
  }

  return <SignatureMaker onSave={handleSave} />
}
```

在没有提交按钮的情况下嵌入窗体并跟踪每个更改:

```jsx
import { useState } from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  const [signatureBase64, setSignatureBase64] = useState(null)

  const handleSubmit = (event) => {
    event.preventDefault()

    fetch('/submit-form', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: event.target.name.value, signature: signatureBase64 }),
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" type="text" />
      <SignatureMaker withSubmit={false} onChange={(detail) => setSignatureBase64(detail.base64)} />
      <button type="submit">Submit</button>
    </form>
  )
}
```

与 CSS 类重排并翻译标签. 一个完整的 DaisyUI 例子 :

```jsx
import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  return (
    <div className="app">
      <SignatureMaker
        className="block my-8"
        saveButtonText="Télécharger"
        undoButtonText="Annuler"
        clearButtonText="Clair"
        drawTypeButtonText="Dessiner"
        textTypeButtonText="Type"
        uploadTypeButtonText="Télécharger"
        textInputPlaceholder="Tapez votre signature ici"
        typeButtonsContainerClass="flex gap-2 mb-4 justify-center"
        drawTypeButtonClass="flex items center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
        drawTypeButtonActiveClass="bg-neutral text-white font-semibold"
        textTypeButtonClass="flex items center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
        textTypeButtonActiveClass="bg-neutral text-white font-semibold"
        uploadTypeButtonClass="flex items center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
        uploadTypeButtonActiveClass="bg-neutral text-white font-semibold"
        textInputClass="input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl"
        canvasClass="bg-white border border-base-300 rounded-2xl w-full"
        undoButtonClass="btn btn-outline btn-sm font-medium"
        clearButtonClass="btn btn-outline btn-sm font-medium"
        saveButtonClass="btn btn-neutral text-white text-base w-full"
      />
    </div>
  );
}
```

## 活动

| Prop | 何时 | 参数 |
| --- | --- | --- |
| `onSave` | 单击后提交按钮 | `{ base64, blob }` |
| `onChange` | 绘图、打出、上传或清除的签名 | `{ base64, blob }`两者 `null` 空时 |

`ref` 允许获取基本要素 `enableDrawPanel()`, (中文(简体) ), `enableTextPanel()`, (中文(简体) ), `enableUploadPanel()` 编辑 [签名( p)](https://github.com/szimek/signature_pad) 实例 `pad`。类型脚本声明包括:

```tsx
import { useRef } from 'react'
import { SignatureMaker, type SignatureDetail, type SignatureMakerElement } from '@docuseal/signature-maker-react'

const ref = useRef<SignatureMakerElement>(null)
const handleSave = (detail: SignatureDetail) => console.log(detail.base64)

<SignatureMaker ref={ref} onSave={handleSave} />
```

## 道具

行为:

| Prop | 默认 | 说明 |
| --- | --- | --- |
| `withDrawn` | `true` | 显示绘图标签 |
| `withTyped` | `true` | 显示类型标签 |
| `withUpload` | `true` | 显示上传标签 |
| `withColorSelect` | `true` | 显示笔色拾取器 |
| `withSubmit` | `true` | 显示提交按钮 |
| `downloadOnSave` | `false` | 在提交时下载 PNG |
| `fontUrl` | 舞蹈脚本 | 用于打字签名的 WOFF 字体 |
| `className`, (中文(简体) ), `style` |  | 适用于 `<signature-maker>` 元素本身 |

标签 : `saveButtonText`, (中文(简体) ), `undoButtonText`, (中文(简体) ), `clearButtonText`, (中文(简体) ), `drawTypeButtonText`, (中文(简体) ), `textTypeButtonText`, (中文(简体) ), `uploadTypeButtonText`, (中文(简体) ), `textInputPlaceholder`。 。 。 .

样式: 以下每个元素都接受 `<element>Class` 财务报告和审定财务报表 `<element>Style` (a CSS 字符串). 一个类取代了默认的内行样式,一个样式会凌驾于它们之上. 状态变体被附加在基类或样式上.

| 元素 | 国家变式 |
| --- | --- |
| `saveButton` | `saveButtonDisabledClass`, (中文(简体) ), `saveButtonsDisabledStyle` |
| `drawTypeButton`, (中文(简体) ), `textTypeButton`, (中文(简体) ), `uploadTypeButton` | `ActiveClass`, (中文(简体) ), `ActiveStyle` |
| `undoButton`, (中文(简体) ), `clearButton`, (中文(简体) ), `textInput`, (中文(简体) ), `canvas`, (中文(简体) ), `typeButtonsContainer`, (中文(简体) ), `controlButtonsContainer` |  |

示例 `drawTypeButtonClass="tab"` 加号 `drawTypeButtonActiveClass="tab-active"` 调制 `class="tab tab-active"` 在选中 Draw 时 .

## 许可证

麻省理工学院

## 常见问题

### @docuseal/signature-maker-react 是什么？

用于绘图、打字和上传签名的响应组件

### 如何安装 @docuseal/signature-maker-react？

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

### @docuseal/signature-maker-react 支持 TypeScript 吗？

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

### @docuseal/signature-maker-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @docuseal/signature-maker-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @docuseal/signature-maker-react 可以商用吗？

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

### @docuseal/signature-maker-react 的下载量有多少？

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

### @docuseal/signature-maker-react 还在维护吗？

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