signt-react-sdk
React components library built for Signt platform from rem.tools
API
Table of Contents
Components
You must use SigntContextProvider
as the parent for DocumentPreview
and DocumentSignaturePad
SigntContextProvider
packages/signt-react/src/context/SigntContextProvider.tsx:45-55
Use this Provider as the parent of {DocumentSignaturePad} and [DocumentPreview]
Example
<SigntContextProvider
publicUrl='https://xxxx.com'
signerToken='XXXXX'
>
You must write all library components here...
<SigntContextProvider />
Parameters
-
props
SigntContextProps Component properties
DocumentPreview
packages/signt-react/src/components/DocumentPreview.tsx:55-182
Component to render a document from a signer's token, you must wrap this component in order to control size, or use maxWidth
and/or maxHeight
props, it will resize relatively from parent node size.
Note: You MUST generate the token from a Signer.
Example
<SigntContextProvider
publicUrl='https://xxxx.com'
signerToken='XXXXX'
>
<div style={{ width: '100%', height: '100%' }}>
<DocumentPreview maxHeight={600} />
</div>
</SigntContextProvider>
Parameters
-
props
DocumentPreviewProps Component properties
DocumentSignaturePad
packages/signt-react/src/components/DocumentSignaturePad.tsx:98-167
This components wraps functionality to handle signature pad
Example 1
<SigntContextProvider
publicUrl='https://xxxx.com'
signerToken='XXXXX'
>
<DocumentSignaturePad
onInitialize={() => console.log('DONE!')}
onComplete={() => console.log('COMPLETE!')}
onError={err => console.error(err)}
>
{({ canvasRef, clear, sendSignature, isEmpty }) => (
<>
<Canvas style={{ border: '1px solid black' }} width={400} height={150} canvasRef={canvasRef} />
<button onClick={clear}>Clear</button>
<button disabled={isEmpty} onClick={sendSignature()}>Send</button>
</>
)}
</DocumentSignaturePad>
</SigntContextProvider>
Example 2 (With password's signer override)
<SigntContextProvider
publicUrl='https://xxxx.com'
signerToken='XXXXX'
>
<DocumentSignaturePad
onInitialize={() => console.log('DONE!')}
onComplete={() => console.log('COMPLETE!')}
onError={err => console.error(err)}
>
{({ canvasRef, clear, sendSignature }) => (
<>
<Canvas style={{ border: '1px solid black' }} width={400} height={150} canvasRef={canvasRef} />
<button onClick={clear}>Clear</button>
<button onClick={sendSignature('THIS IS A NEW PASSWORD')}>Send</button>
</>
)}
</DocumentSignaturePad>
</SigntContextProvider>
Parameters
-
props
DocumentSignaturePadProps Component properties
Returns RenderChildrenProps
Canvas
packages/signt-react/src/components/Canvas.tsx:22-30
Wraps a canvas element properly to render and adjust over any screen size and DPI, it requires the canvasRef provided by DocumentSignaturePad.
Parameters
-
props
CanvasProps Component properties
Props Types
Types definitions for components
SigntContextProps
packages/signt-react/src/context/SigntContextProvider.tsx:11-15
Type: {signerToken: string, children: React.ReactNode, publicUrl: string}
Parameters
Properties
DocumentPreviewProps
packages/signt-react/src/components/DocumentPreview.tsx:26-33
Type: {onError: Function?, onLoad: Function?, errorComponent: ReactNode?, loadingComponent: ReactNode?, maxWidth: any?, maxHeight: any?}
Parameters
-
onError
Function? Callback in case of error (optional) (optional, defaultnull
) -
onLoad
Function? Callback on initialized (optional) (optional, defaultnull
) -
errorComponent
ReactNode? Component to render on PDF viewer error (optional) (optional, defaultnull
) -
loadingComponent
ReactNode? Component to render on PDF viewer loading (optional) (optional, defaultnull
) -
maxWidth
any Max width size from viewer (for responsive purposes) (optional, defaultnull
) -
maxHeight
any Max height size from viewer (for responsive purposes) (optional, defaultnull
)
Properties
-
onError
Function? -
onLoad
Function? -
errorComponent
ReactNode? -
loadingComponent
ReactNode? -
maxWidth
any? -
maxHeight
any?
DocumentSignaturePadProps
packages/signt-react/src/components/DocumentSignaturePad.tsx:31-39
Type: {backgroundColor: String?, penColor: String?, children: function (props: RenderChildrenProps): ReactNode, onError: Function?, onInitialize: function (engine: SignaturePad): void?, onComplete: Function?, destroyTokenOnSign: boolean?}
Parameters
-
backgroundColor
String? Pad's Background color. Note: Be careful with this, this can change the background color generated, don't use if possible. (optional, defaultrgba(0,0,0,0)
) -
penColor
String? Pad's trace color. (optional, defaultblack
) -
children
Function Component body, this must be use as function like theDocumentSignaturePad
example. -
onError
Function? Callback if there's any error (optional, defaultnull
) -
onInitialize
Function? Callback on component initialize, the argument contains aSignaturePad
instance. (optional, defaultnull
) -
destroyTokenOnSign
boolean? This destroy the signer token provided onSigntContextProvider
(optional, defaultfalse
)
Properties
-
backgroundColor
String? -
penColor
String? -
children
function (props: RenderChildrenProps): ReactNode -
onError
Function? -
onInitialize
function (engine: SignaturePad): void? -
onComplete
Function? -
destroyTokenOnSign
boolean?
RenderChildrenProps
packages/signt-react/src/components/DocumentSignaturePad.tsx:15-20
This properties are passed to the DocumentSignaturePad
body function.
Type: {canvasRef: Ref<(HTMLCanvasElement | null)>, clear: function (): void, isEmpty: boolean, sendSignature: function (password: (String | null)): function (): void}
Parameters
-
canvasRef
(Ref<HTMLCanvasElement> | null) Must use this ref within an<canvas>
element, otherwise will throw an Error. -
clear
Function Clears the signature pad. -
isEmpty
boolean Checks if signature pad is empty, component will be re-rendered on changes. -
sendSignature
Function This method sends signature to Signt platform.
Properties
-
canvasRef
Ref<(HTMLCanvasElement | null)> -
clear
function (): void -
isEmpty
boolean -
sendSignature
function (password: (String | null)): function (): void
CanvasProps
packages/signt-react/src/components/Canvas.tsx:10-15
Type: {canvasRef: Ref<HTMLCanvasElement>, width: any, height: any, style: CSSProperties?}
Parameters
-
canvasRef
(RefObject<HTMLCanvasElement> | null) Ref passed by DocumentSignaturePad -
width
any Any acceptable width value for React -
height
any Any acceptable height value for React -
style
CSSProperties? Style property passed like any other React Component
Properties
-
canvasRef
Ref<HTMLCanvasElement> -
width
any -
height
any -
style
CSSProperties?