react-signature-form

A lightweight and customisable package to enable your users to set their autographs and save it to an image.

Contents

• Why?
• Demo?
• Installation
• Usage
• API
• Props
• License

Why?

We wanted to create a simple autograph form field, without any unnecessary functionalities or dependencies.

• Simple integration only 2 required parameters.
• Customizable options for any project.
• Typescript compatibility.
• Up to date React Hook examples.

And also is incredibly fault tolerant and performant.

react-signature-form is the only tool that checks all of those boxes.

Demo

Check out the demo of this library on Github Pages.

Installation

With npm

npm install react-signature-form

With yarn

yarn add react-signature-form

Usage

import React, {useState} from 'react'
import ReactDOM from 'react-dom'
import {SignatureForm} from 'react-signature-form'

const [signature, setSignature] = useState(null);

ReactDOM.render(
  <SignatureForm
      signature={signature}
      setSignature={setSignature}
      width={400}
      height={200}
  />,
  document.getElementById('root')
)

API

The SignatureForms expects a signature and setSignature callback function. After the user saved the signature it is stored in signature. A React useState hook is the easiest way to do this.

• signature : string, first argument of the useState hook.
• setSignature : function, second argument of the useState hook.

Props

The props of SignatureForm mainly control the properties and styling of the buttons and canvas. All props are optional. The canvas, buttons and signature have the following default values.

• width : number, default: 400
• height : number, default: 200
• canvasStyle : CSSProperties
• markerStyle : CanvasLineProperties, default: true
  • lineWidth : number, default: 4
  • lineJoin : CanvasLineJoin, default: round
  • strokeStyle : string, default: #000
• saveButtonStyle : CSSProperties
• clearButtonStyle : CSSProperties
• redrawButtonStyle : CSSProperties
• saveButtonText : string, default: Save
• clearButtonText : string, default: Clear
• redrawButtonText : string, default: Redraw

License

MIT © Miyagami

Made with ❤️ by Miyagami