@react-goodies/hand-signed

1.0.0 • Public • Published

Node.js CI

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Opera
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;

Dependents (0)

Package Sidebar

Install

npm i @react-goodies/hand-signed

Weekly Downloads

3

Version

1.0.0

License

MIT

Unpacked Size

5.76 MB

Total Files

75

Last publish

Collaborators

  • marborkowski.react