React Signature Component for ShadCN/UI

ShadCN/UI offers a multitude of components that can be used to create custom interfaces. However, it can't account for every possible use case. If you're looking to add signature generation functionality to your application, signature-maker-react might be just what you need. Like ShadCN/UI, it supports customization via TailwindCSS and can be easily integrated into your projects.

In this article, we'll explore how to integrate signature-maker-react with ShadCN/UI, customize it to suit your needs, and provide users with a convenient interface for creating signatures.

Installation

First, install the library using npm or yarn:

npm install @docuseal/signature-maker-react

yarn add @docuseal/signature-maker-react

Basic Usage

Let's consider a scenario where you need to add the ability to generate a signature directly within your form. To achieve this, simply add the SignatureMaker component to your form:

import React, { useState } from 'react';
import { SignatureMaker } from '@docuseal/signature-maker-react';
import { Button, Input, Form, FormItem, Label } from '@shadcn/ui';

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

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

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await fetch('/submit-form', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name,
          signature: signatureBase64,
        }),
      });
    } catch (error) {
      // Handle errors
    }
  };

  return (
    <div className="app">
      <Form onSubmit={handleSubmit}>
        <FormItem>
          <Label htmlFor="name">Name</Label>
          <Input
            name="name"
            id="name"
            type="text"
            value={name}
            onChange={handleNameChange}
          />
        </FormItem>
        <FormItem>
          <SignatureMaker
            withSubmit={false}
            onChange={handleSignatureChange}
          />
        </FormItem>
        <Button type="submit" variant="primary">
          Submit
        </Button>
      </Form>
    </div>
  );
}

In this example, we've hidden the signature's submit button by setting withSubmit={false}, since we want to submit it along with other form data.Any changes to the signature trigger the onChange event, which returns an object with two keys: base64 and blob. The Base64 format is more convenient if you're using JSON to send data to the server, but you can also use blob if you need to send data as FormData.

Customization

By default, SignatureMaker comes with basic styling, but it can be extensively customized using TailwindCSS. You can modify both its appearance and behavior to match your application's requirements.

Configuring Signature Input Methods

You can define how users can create a signature by using the following props:

withDrawn: allows users to draw a signature (default is true).
withTyped: allows users to type a signature (default is true).
withUpload: allows users to upload a signature image (default is false).
withColorSelect: allows users to select the signature color (default is true).

Customizing Styles with TailwindCSS

Since both ShadCN/UI and signature-maker-react support TailwindCSS, you can easily apply custom styles. The SignatureMaker component accepts class names for various elements: canvasClass, saveButtonClass, clearButtonClass, undoButtonClass, and so on.

Example with Custom Styles

<SignatureMaker
  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"
/>

This is just a small glimpse of what signature-maker-react can do. You can internationalize the component, use regular styles instead of TailwindCSS, or use it as a standalone component. For more information, refer to the documentation.

Conclusion

The signature-maker-react library provides a simple and customizable way to add signature functionality to your React applications. With support for TailwindCSS and integration with ShadCN/UI components, you can create a user-friendly interface that aligns with your application's design.

Blog