Forem: Alex Turchyn

React Signature Component for ShadCN/UI

Alex Turchyn — Thu, 10 Oct 2024 15:08:54 +0000

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.

React Signature Field in 1 Minute

Alex Turchyn — Thu, 26 Sep 2024 13:03:03 +0000

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

Install the library using npm or yarn:

npm install @docuseal/signature-maker-react

yarn add @docuseal/signature-maker-react

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.