@types/react-signature-canvas

What is @types/react-signature-canvas?

@types/react-signature-canvas provides TypeScript definitions for the react-signature-canvas package, which is a React wrapper for the signature_pad library. This package allows you to easily integrate a signature canvas into your React applications, enabling users to draw signatures or other freehand drawings.

What are @types/react-signature-canvas's main functionalities?

Basic Signature Canvas

This code demonstrates how to set up a basic signature canvas using the react-signature-canvas package. The canvas allows users to draw signatures with a black pen.

import React from 'react';
import SignatureCanvas from 'react-signature-canvas';

const SignaturePad = () => {
  let sigPad = React.useRef(null);

  return (
    <div>
      <SignatureCanvas ref={(ref) => { sigPad = ref; }} penColor='black' canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />
    </div>
  );
};

export default SignaturePad;

Clear Signature Canvas

This code adds a button to clear the signature canvas. When the button is clicked, the clear function is called, which clears the canvas.

import React from 'react';
import SignatureCanvas from 'react-signature-canvas';

const SignaturePad = () => {
  let sigPad = React.useRef(null);

  const clear = () => {
    sigPad.clear();
  };

  return (
    <div>
      <SignatureCanvas ref={(ref) => { sigPad = ref; }} penColor='black' canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />
      <button onClick={clear}>Clear</button>
    </div>
  );
};

export default SignaturePad;

Save Signature as Image

This code adds a button to save the signature as an image. When the button is clicked, the save function is called, which logs the data URL of the signature image to the console.

import React from 'react';
import SignatureCanvas from 'react-signature-canvas';

const SignaturePad = () => {
  let sigPad = React.useRef(null);

  const save = () => {
    const dataURL = sigPad.toDataURL();
    console.log(dataURL);
  };

  return (
    <div>
      <SignatureCanvas ref={(ref) => { sigPad = ref; }} penColor='black' canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />
      <button onClick={save}>Save</button>
    </div>
  );
};

export default SignaturePad;

Other packages similar to @types/react-signature-canvas

react-signature-pad-wrapper

react-signature-pad-wrapper is another React wrapper for the signature_pad library. It provides similar functionality to react-signature-canvas, allowing users to draw signatures on a canvas. However, it may have different APIs and additional features.

react-signature-pad

react-signature-pad is a React component for signature_pad. It offers similar capabilities for capturing signatures in a React application. The main difference is in the implementation and API, which might be more suitable for certain use cases.

README

Installation

npm install --save @types/react-signature-canvas

Summary

This package contains type definitions for react-signature-canvas (https://github.com/agilgur5/react-signature-canvas).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-signature-canvas.

index.d.ts

import * as React from "react";
import SignaturePad = require("signature_pad");

declare namespace ReactSignatureCanvas {
    interface ReactSignatureCanvasProps extends SignaturePad.SignaturePadOptions {
        /** directly passed to the underlying <canvas /> element */
        canvasProps?: React.CanvasHTMLAttributes<HTMLCanvasElement> | undefined;

        /**
         * whether or not the canvas should be cleared when the window resizes
         * @default true
         */
        clearOnResize?: boolean | undefined;
    }
}

declare class ReactSignatureCanvas extends React.Component<ReactSignatureCanvas.ReactSignatureCanvasProps> {
    /** rebinds all event handlers */
    on: SignaturePad["on"];

    /** unbinds all event handlers */
    off: SignaturePad["off"];

    /** clears the canvas using the {@link ReactSignatureCanvas.ReactSignatureCanvasProps.backgroundColor|backgroundColor} prop */
    clear: SignaturePad["clear"];

    isEmpty: SignaturePad["isEmpty"];

    /** writes a base64 image to canvas */
    fromDataURL: SignaturePad["fromDataURL"];

    /** returns the signature image as a data URL */
    toDataURL: SignaturePad["toDataURL"];

    /** draws signature image from an array of point groups */
    fromData: SignaturePad["fromData"];

    /** returns signature image as an array of point groups */
    toData: SignaturePad["toData"];

    /** returns the underlying canvas ref. Allows you to modify the canvas however you want or call methods such as {@link ReactSignatureCanvas.toDataURL|toDataURL()} */
    getCanvas(): HTMLCanvasElement;

    /** creates a copy of the canvas and returns a {@link https://github.com/agilgur5/trim-canvas|trimmed version} of it, with all whitespace removed. */
    getTrimmedCanvas(): HTMLCanvasElement;

    /** returns the underlying SignaturePad reference */
    getSignaturePad(): SignaturePad;
}

export = ReactSignatureCanvas;

Additional Details

• Last updated: Mon, 23 Sep 2024 18:39:57 GMT
• Dependencies: @types/react, @types/signature_pad

Credits

These definitions were written by Kamil Socha.