Signature Maker React

Signature Maker is a React component that lets users draw or type their signature.

Other implementations

• Vanilla JS
• Vue

Demo

Try the live demo here

Documentation

Check out the full documentation here.

Installation

npm install @docuseal/signature-maker-react

OR

yarn add @docuseal/signature-maker-react

Usage

Basic Usage with standard styles and default signature saving behavior:

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

export function App() {
  return (
    <div className="app">
      <SignatureMaker downloadOnSave={true} />
    </div>
  );
}

Usage with default styles but custom signature saving behavior, such as uploading the signature to a server:

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

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

  return (
    <div className="app">
      <SignatureMaker onSave={handleSave} />
    </div>
  );
}

Usage without a save signature button, embedded in another form. The signature will be stored in a form field named signature:

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

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

  const handleSignatureChange = (event) => {
    setSignatureBase64(event.base64);
  }

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

  return (
    <div className="app">
      <form id="myForm" onSubmit={handleSubmit}>
        <input name="name" type="text" />
        <SignatureMaker
          withSubmit={false}
          onChange={handleSignatureChange}
        >
        </SignatureMaker>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Usage without a save signature button and tracking each signature change:

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

export function App() {
  const handleChange = (event) => {
    if (event.base64) {
      fetch('/background-save-signature', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ file: event.base64 }),
      });
    } else {
      console.log('No signature to save');
    }
  }

  return (
    <div className="app">
      <SignatureMaker
        withSubmit={false}
        onChange={handleChange}
      />
    </div>
  );
}

Usage with custom button labels and classes (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>
  );
}

Usage with customization of certain elements using CSS classes and styles:

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

export function App() {
  return (
    <div className="app">
      <SignatureMaker
        saveButtonClass="btn btn-neutral text-white text-base w-full"
        canvasClass="bg-white border border-base-300 rounded-2xl w-full"
        canvasStyle="border: 2px solid #000;"
      />
    </div>
  );
}

Customization

Signature Maker can be customized with the following attributes:

downloadOnSave
withTyped
withDrawn
withUpload
withColorSelect
withSubmit
controlButtonsContainerClass
controlButtonsContainerStyle
saveButtonText
saveButtonClass
saveButtonStyle
saveButtonDisabledClass
saveButtonsDisabledStyle
undoButtonText
undoButtonClass
undoButtonStyle
clearButtonText
clearButtonClass
clearButtonStyle
textInputPlaceholder
textInputClass
textInputStyle
canvasClass
canvasStyle
typeButtonsContainerClass
typeButtonsContainerStyle
drawTypeButtonText
drawTypeButtonClass
drawTypeButtonStyle
drawTypeButtonActiveClass
drawTypeButtonActiveStyle
textTypeButtonText
textTypeButtonClass
textTypeButtonStyle
textTypeButtonActiveClass
textTypeButtonActiveStyle
uploadTypeButtonText
uploadTypeButtonClass
uploadTypeButtonStyle
uploadTypeButtonActiveClass
uploadTypeButtonActiveStyle
fontUrl
onSave
onChange

The full documentation with detailed configuration and event descriptions can be found here.

License

MIT