React Signature Field in 1 Minute

When it comes to adding a signature field to a React application, developers often reach for popular Canvas libraries and start integrating them into forms or using them as standalone components. This makes sense if you are working with a complex form. But if all you need is a basic signature functionality—choosing a signature color, typing the signature with a keyboard, or adding a "clear" button—building your own component might be unnecessary.

For exactly these scenarios, the signature-maker-react library exists (it also has versions for Vue and Vanilla JS).

You can see a demo here.

How to Use It

1. Install the library using npm or yarn:

npm install @docuseal/signature-maker-react

or

yarn add @docuseal/signature-maker-react

1. Add the SignatureMaker component to your project:

You’ll have access to a component with pre-defined styles that can be used as-is or customized via CSS. Here’s a basic example where you simply add the component to a page and let users draw a signature and download it:

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

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

While it’s unlikely you’ll use the component with these exact settings, this gives you a general idea of how it looks and functions with all features enabled. A more common scenario would involve using the component in a form, where you save the signature as part of the form state and process it when the form is submitted:

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}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

In this example, we hide the "Submit" button from the SignatureMaker component because we want to use the form's own submit button to send the data to the server. The signature is tracked using the onChange event from SignatureMaker, which triggers whenever the signature is updated. While we use a base64-encoded image in this example, the event also provides a blob, which can be uploaded to the server. Base64 is only more convenient when embedding the file into JSON, but for most other cases, using a blob is more efficient.

Configuration Options

You have access to more than 40 configuration options, but don’t worry—most of them won’t be necessary for basic use.

First, decide what features you want to offer to your users. Here are the key settings:

• downloadOnSave - Automatically downloads the signature when the "Save" button is clicked (default is false).
• withTyped - Allows the user to type their signature (default is true).
• withDrawn - Enables drawing the signature (default is true).
• withUpload - Allows the user to upload a signature file (default is true).
• withColorSelect - Lets users choose the color of their signature (default is true). If false, the signature will be black.
• withSubmit - Displays a "Submit" button (default is true).

Additionally, you can track signature changes using the following events, which return an object containing both base64 and blob properties:

• onChange - Triggered whenever the signature is changed.
• onSave - Triggered when the "Save" button is clicked.

That’s all you need to know to add a signature field to your React app!

Customization

As mentioned earlier, you can customize the component's styles and classes using CSS. You can pass class names and styles as properties to the component. For example:

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

In this example, we’re using classes from TailwindCSS (DaisyUI) along with inline styles to customize the save button and the canvas, but you can use any CSS framework or your own custom styles. The library provides numerous props for customizing any part of the component. You can find all available options in the full documentation.

Internationalization (I18n)

The world doesn’t revolve around English, so you can translate all the text in the component into any language you need. Here’s an example of adapting the component to French:

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

export function App() {
  return (
    <div className="app">
      <SignatureMaker
        saveButtonText="Télécharger"
        undoButtonText="Annuler"
        clearButtonText="Effacer"
        drawTypeButtonText="Dessiner"
        textTypeButtonText="Saisie"
        uploadTypeButtonText="Télécharger"
        textInputPlaceholder="Tapez votre signature ici"
      />
    </div>
  );
}

Conclusion

If you need to add signature functionality to your React app right now, this library is the perfect solution. It’s not a silver bullet, but it will allow you to integrate signature functionality into your app within minutes. If you need something more complex, you can always turn to more robust libraries, but every project requires its own approach.