Example with modal, aspect ratio, and hooks

[aidanlister]

Here's an example of using this package with react hooks, in case it helps someone:

import React, { useState, useRef, useCallback } from 'react'
import PropTypes from 'prop-types'
import SignatureCanvas from 'react-signature-canvas'
import Modal, { Footer } from 'apps/core/frontend/widgets/modal'

const ModalSignatureCanvas = ({onSave, widthRatio, canvasProps}) => {
  const [isVisible, setIsVisible] = useState(false)
  const [signatureResult, setSignatureResult] = useState('')
  const sigCanvas = useRef({})
  const sigPad = useRef({})

  const saveInput = () => {
    const dataURL = sigCanvas.current.toDataURL()
    setSignatureResult(dataURL)
    onSave(dataURL)
    setIsVisible(!isVisible)
  }
  const clearInput = () => sigPad.current.clear()

  const measuredRef = useCallback(node => {
    const resizeCanvas = (signaturePad, canvas) => {
      canvas.width = canvas.parentElement.clientWidth // width of the .canvasWrapper
      canvas.height = canvas.parentElement.clientWidth / widthRatio
      signaturePad.clear()
    }

    if (node !== null) {
      sigCanvas.current = node.getCanvas()
      sigPad.current = node.getSignaturePad()
      resizeCanvas(node.getSignaturePad(), node.getCanvas())
    }
  }, [widthRatio])

  const buttonText = signatureResult ? 'Signature changed' : 'Change signature'

  return (
    <>
      <button type="button" className="btn btn-secondary btn-sm" onClick={() => setIsVisible(true)}>{buttonText}</button>
      {isVisible &&
        <Modal
          title="Enter your signature"
          onHide={() => setIsVisible(false)}
        >
          <div className="canvasWrapper">
            <SignatureCanvas canvasProps={canvasProps} ref={measuredRef} />
          </div>
          <Footer>
            <div className="btn-group btn-block">
              <button type="button" className="btn btn-secondary w-50" onClick={clearInput}>Clear</button>
              <button type="button" className="btn btn-primary w-50" onClick={saveInput}>Save</button>
            </div>
          </Footer>
        </Modal>}
    </>
  )
}
ModalSignatureCanvas.propTypes = {
  canvasProps: PropTypes.object,
  widthRatio: PropTypes.number.isRequired,
  onSave: PropTypes.func,
}

export default ModalSignatureCanvas

You can see there's some tricky bits, eg I had to use useCallback for the ref instead of just passing a ref, so that I could call resizeCanvas() immediately after the first render.

I wanted the canvas to have the same aspect ratio no matter what the container, so rather than specifying a canvas width I specify an aspect ratio.

Additionally, calling canvas.getContext('2d').scale(ratio, ratio) seemed to cause scaling issues rather than solving those scaling issues, so I disabled it here.

Finally, for some reason, sigCanvas.current.toDataURL('image/svg+xml') just exports PNG not SVG ... any tips on that would be handy.

[agilgur5]

Sorry, but this is an awfully specific use-case with a modal and custom behavior like your aspect ratio scaling, not just a pure hooks example. Those features add a lot of complexity that's unnecessary for many, if not most, users. As such, there's a pretty high chance that an example like this would confuse users, especially beginners, rather than help them.

There is also already a pretty good tutorial out there that goes through end-to-end using a modal and React hooks: https://dev.to/ma7eer/create-a-signature-pad-in-react-3mmi

I think a modal example and a hooks example could be good to have in the docs, but they would have to be as simple as possible. Also note that react-signature-canvas supports React v0.14-16; many of those included versions don't support hooks.

---

Some of what you wrote sounds like you're asking for support for your very specific use-case. This isn't a support forum -- I think that's better suited to a place like StackOverflow (or consulting) than here. I can attempt to help you, but please do not expect that from unpaid open-source maintainers.

calling canvas.getContext('2d').scale(ratio, ratio) seemed to cause scaling issues rather than solving those scaling issues, so I disabled it here.

See above.

for some reason, sigCanvas.current.toDataURL('image/svg+xml') just exports PNG not SVG ... any tips on that would be handy.

That's passed directly to upstream signature_pad and you can see the code it uses to handle that here. I don't see any bugs there, but if there were, they would be upstream there, not here.
It's also possible you're using an outdated version of react-signature-canvas (you didn't provide a full repro). v1.0.0+ wraps signature_pad and therefore supports its SVG functionality, but older versions do not.

[agilgur5]

Your comment has been marked as abusive for being very condescending.
That type of behavior is not welcome here.

Your methods of doing things are far from the only way of doing things.

[agilgur5]

So despite being marked as abusive, locked, and called out, OP decided to continue abusive and condescending behavior by personally emailing & harassing me.

Here's a snippet of that email:

I invite you to try and make an example that works on a mobile to see what I mean. Once you've done this you might reconsider your comment about this example being "far" from the only way to do it. I suspect you got a little caught up in the heat of the moment - don't worry about it.

OP has been blocked and reported.

---

For other readers, you've probably read some of the issues, PRs, examples, tutorials, etc, and so you probably know that there's quite a bit about mobile in this repo. And if you were to learn about the history of this repo, you'd find it was forked 4 years ago to support an e-sign app that was built for mobile and uses modals.

Suffice to say, I've definitely made this work on mobile any number of times... But, unsurprisingly, OP continued making abusive & condescending comments even after being explictly told that. Don't be OP.