Skip to content

A Next.js React demo app featuring a robust document signature capturing component

Notifications You must be signed in to change notification settings

littleraeofsun/react-signature-demo

Repository files navigation

Signature Capture Demo

This is a Next.js project bootstrapped with create-next-app. This project features a custom Signature Capture component for a complex document signing process.

Getting Started

Topaz Tablet Setup

This app relies on the Topaz Signature tablet device with a model number of T-S460-HSB-R. If you have this device, you will need to:

  1. Install the SigWeb Service: Go to https://topazsystems.com/sdks/sigweb.html and click "Download SigWeb Installer" During the installation step, be sure to configure the service for the model T-S460-HSB-R. Restart your computer once the installation has completed.
  2. Install the SigWebExtLite Browser Extension: Go to https://topazsystems.com/sdks/sigplusextlite.html and click "Download" Once installation is complete, be sure to restart your computer one more time
  3. Verify device function: Once your tablet is plugged in, you can navigate to https://www.sigplusweb.com/sigwebtablet_demo.html, click the "Sign" button and begin writing on the tablet. A preview of your signature will appear in the top box if everything has been properly setup.

Note: If you do not have this specific tablet or are having difficulty verifying the function, the application provides a "Use Sample Signature" button that can be used to bypass the tablet signature collection process and continue with the rest of the demo.

Local File Server

This app makes use of the npm package http-server as a simple local file server to simulate downloading PDF documents.

Run command: npx http-server "path\to\your\project\public" --cors

Access files like this:

React App

Don't forget to npm i!

To run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Demo Instructions

Once the app is up and running, simply click on the "Launch Demo" button on the main page. Follow the instructions to collect all the necessary signatures and sign documents when prompted. Once all documents are signed, there should be some "File" links on the main page that you can click to view your fully-signed PDF documents.

About

A Next.js React demo app featuring a robust document signature capturing component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published