has anyone managed to get this working with TypeScript?

[sheam]

I tried creating a declaration file index.d.ts:

declare module 'react-signature-canvas'
{
    import * as React from 'react';
    
    interface ISignatureCanvasProps
    {
        velocityFilterWeight?: number;
        minWidth?: number;
        maxWidth?: number;
        dotSize?: number;
        penColor?: string;
        backgroundColor?: string;
        onEnd?: () => void;
        onBegin?: () => void;
        canvasProps?: any;
    }
    
    export class SignatureCanvas extends React.Component<ISignatureCanvasProps, any>
    {
        constructor(p: ISignatureCanvasProps, s: any);
    }
    
    namespace SignatureCanvas {}
}

And then importing via: import * as SignatureCanvas from 'react-signature-canvas';.

But when I use the <SignatureCanvas /> in my react component I get
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

Any ideas?

[sheam]

This typings file works:

declare module 'react-signature-canvas'
{
    import * as React from 'react';

    interface ISignatureCanvasProps
    {
        velocityFilterWeight?: number;
        minWidth?: number;
        maxWidth?: number;
        dotSize?: number;
        penColor?: string;
        backgroundColor?: string;
        onEnd?: () => void;
        onBegin?: () => void;
        canvasProps?:
        {
            width?: number;
            height?: number;
        };
    }

    class SignatureCanvas extends React.Component<ISignatureCanvasProps, any>
    {
        constructor(p: ISignatureCanvasProps, s: any);
        clear(): void;
        isEmpty(): boolean;
        fromDataURL(base64String: string): void;
        getCanvas(): HTMLCanvasElement;
        getTrimmedCanvas(): HTMLCanvasElement;
    }

    export default SignatureCanvas;
}

Freel free to add this as index.d.ts to your project.

[agilgur5]

This was superseded by #21 and #42, so locking this as resolved now