signt-react-sdk

React components library built for Signt platform from rem.tools

API

Table of Contents

• Components
  • SigntContextProvider
    • Example
    • Parameters
  • DocumentPreview
    • Example
    • Parameters
  • DocumentSignaturePad
    • Example 1
    • Example 2 (With password's signer override)
    • Parameters
  • Canvas
    • Parameters
• Props Types
  • SigntContextProps
    • Parameters
    • Properties
  • DocumentPreviewProps
    • Parameters
    • Properties
  • DocumentSignaturePadProps
    • Parameters
    • Properties
  • RenderChildrenProps
    • Parameters
    • Properties
  • CanvasProps
    • Parameters
    • Properties

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

• signerToken String
• children ReactNode
• publicUrl String

Properties

• signerToken string
• children React.ReactNode
• publicUrl string

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, default null)
• onLoad Function? Callback on initialized (optional) (optional, default null)
• errorComponent ReactNode? Component to render on PDF viewer error (optional) (optional, default null)
• loadingComponent ReactNode? Component to render on PDF viewer loading (optional) (optional, default null)
• maxWidth any Max width size from viewer (for responsive purposes) (optional, default null)
• maxHeight any Max height size from viewer (for responsive purposes) (optional, default null)

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, default rgba(0,0,0,0))
• penColor String? Pad's trace color. (optional, default black)
• children Function Component body, this must be use as function like the DocumentSignaturePad example.
• onError Function? Callback if there's any error (optional, default null)
• onInitialize Function? Callback on component initialize, the argument contains a SignaturePad instance. (optional, default null)
• destroyTokenOnSign boolean? This destroy the signer token provided on SigntContextProvider (optional, default false)

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?