@types/react-signature-canvas

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: Thu, 06 Feb 2025 17:33:47 GMT
• Dependencies: @types/react, @types/signature_pad

Credits

These definitions were written by Kamil Socha.