Neutral Political Machine

    @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;

    Install

    npm i @react-goodies/hand-signed

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.76 MB

    Total Files

    75

    Last publish

    Collaborators

    • marborkowski.react