@rem.tools/signt-react-sdk NPM

logo

signt-react-sdk

React components library built for Signt platform from rem.tools

API

Components
Props Types

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](https://developer.mozilla.org/docs/Web/API/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](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement), width: any, height: any, style: CSSProperties?}

Parameters

canvasRef (RefObject[HTMLCanvasElement](https://developer.mozilla.org/docs/Web/API/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