签名制作者反应

反应组件,让用户绘制,打入或上传他们的签名,并作为PNG返回. 一个薄薄的包裹围绕 签名制作者-js 网页组件.

现场演示 • 妇女 文档 • 妇女 联合来文 • 妇女 阴道

安装

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

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

使用量

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

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

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

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

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} />
}

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

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 例子 :

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>
  );
}

活动

ref 允许获取基本要素 enableDrawPanel(), (中文(简体) ), enableTextPanel(), (中文(简体) ), enableUploadPanel() 编辑 签名( p) 实例 pad。类型脚本声明包括:

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} />

道具

行为:

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

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

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

许可证

麻省理工学院