SignatureComponent

Represents the React Signature Component

<SignatureComponent></SignatureComponent>

Properties

backgroundColor

string

Gets or sets the background color of the component. The background color of the component that accepts hex value, rgb and text (like ‘red’). The default value is ”.

Defaults to ”

backgroundImage

string

Gets or sets the background image for the component. An image that used to fill the background of the component. The default value is ”.

Defaults to ”

disabled

boolean

Gets or sets whether to disable the signature component where the opacity is set to show disabled state. True, if the signature component is disabled for user interaction. The default value is false.

Defaults to false

enablePersistence

boolean

Gets or sets whether to persist component’s state between page reloads. True, if the component’s state persistence is enabled. The default value is false. Component’s property will be stored in browser local storage to persist component’s state when page reloads.

Defaults to false

isReadOnly

boolean

Gets or sets whether to prevent the interaction in signature component. True, if the signature component is read only state where the user interaction is prevented. The default value is false.

Defaults to false

maxStrokeWidth

number

Gets or sets the maximum stroke width for signature. The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth. The maximum width of stroke. The default value is 2.0.

Defaults to 2

minStrokeWidth

number

Gets or sets the minimum stroke width for signature. The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth. The minimum width of stroke. The default value is 0.5.

Defaults to 0.5

saveWithBackground

boolean

Gets or sets whether to save the signature along with Background Color and background Image while saving. True, if signature component to save with background. The default value is true.

Defaults to true

signatureValue

string

Gets or sets the last signature url to maintain the persist state.

strokeColor

string

Gets or sets the stroke color of the signature. The color of the signature stroke that accepts hex value, rgb and text (like ‘red’). The default value is “#000000”.

Defaults to ‘#000000’

velocity

number

Gets or sets the velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface. The Signature component calculates stroke thickness based on Velocity, MinStrokeWidth and MaxStrokeWidth. The default value is 0.7.

Defaults to 0.7

Methods

canRedo

To check whether the redo collection is empty or not.

Returns boolean

canUndo

To check whether the undo collection is empty or not.

Returns boolean

clear

Erases all the signature strokes signed by user.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also it maintains the initial input element from the DOM.

Returns void

draw

To draw the signature based on the given text, with the font family and font size.

Returns void

getBlob

To get the signature as Blob.

Returns Blob

isEmpty

To check whether the signature is empty or not.

Returns boolean

load

To load the signature with the given base 64 string, height and width.

Returns void

redo

Redo the last user action.

Returns void

refresh

To refresh the signature.

Returns void

save

To save the signature with the given file type and file name.

Returns void

saveAsBlob

To save the signature as Blob.

Returns Blob

undo

Undo the last user action.

Returns void

Events

beforeSave

EmitType<SignatureBeforeSaveEventArgs>

Gets or sets an event callback that is raised while saving the signature. The file name and the file type can be changed using SignatureBeforeSaveEventArgs and SignatureFileType. The event callback is raised only for the keyboard action (Ctrl + S).

change

EmitType<SignatureChangeEventArgs>

Gets or sets an event callback that is raised for the actions like undo, redo, clear and while user complete signing on signature component.

created

EmitType<Event>

Triggers once the component rendering is completed.