@react-goodies/hand-signed

HandSigned is a react component that allows you to easily expose a manual signature interface in your web application.

This library uses the classic canvas element to render the signature.

You can even use ref property to execute internal methods of the component like clear, getDataURL, getRawData. You can also read the original canvas element reference if you need.

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Opera
IE11, Edge >= 80	>= 55	>= 55	>= 12.1	>= 12.1	>= 40

Installation

YARN

yarn add @react-goodies/hand-signed

NPM

npm install @react-goodies/hand-signed --save

Basic implementation

import React from "react";
import { HandSigned } from "@react-goodies/hand-signed";

const initialData = [
  { x: 275, y: 143 },
  { x: 276, y: 143 },
  { x: 276, y: 143 },
  { x: 277, y: 143 },
  { x: 277, y: 142 },
  { x: 278, y: 142 },
  { x: 279, y: 141 },
  { x: 280, y: 141 },
  { x: 281, y: 140 },
  { x: 282, y: 139 },
  { x: 283, y: 139 },
  { x: 283, y: 138 },
  { x: 284, y: 138 },
  { x: 284, y: 138 },
  { x: 285, y: 138 },
];

const App = () => {
  const mainRef = React.useRef(null);

  return (
    <>
      <div>
        <HandSigned
          style={{ border: "1px solid #ccc" }}
          initialData={initialData}
          color="#000000"
          width="700"
          height="300"
          ref={mainRef}
        />
      </div>
      <div className="buttons">
        <button
          onClick={() => console.log("data", mainRef.current.getRawData())}
        >
          Get raw data
        </button>
        <button onClick={() => mainRef.current.clear()}>clear</button>
        <button
          onClick={() => console.log("canvas", mainRef.current.getDataURL())}
        >
          Get base64 image/png data
        </button>

        <button onClick={() => console.log("ref", mainRef.current.internalRef)}>
          Get ref
        </button>
      </div>
    </>
  );
};

export default App;