Help with isEmpty function

[chattago2002]

Thanks for this repo, very useful.

I need help about the "isEmpty()" function. I have the component defined as follow:

const refSignature = useRef(null);
... some code here ....
<SignaturePad ref={refSignature} options={{ minWidth: 1, maxWidth: 3, penColor: 'rgb(0,0,0)' }} />

The component works fine and I can get dataUrl from the canvas but I need to enable a button only if the canvas is not empty. I tried in some different ways but I get errors. What is the best way to do this?

[michaeldzjap]

It depends on what you are trying to achieve exactly. Is the button meant to clear the canvas? If so, you could use a combination of clicking on that button and listening to any of the signature pad events (probably beginStroke) in conjunction with the isEmpty function to determine whether the button should be disabled or not.

1. If you click on the clear button then you can automatically disable the button right after the canvas has been erased. See the example directory in this repo to see how you can clear the canvas on a button click. This would be pretty straightforward.
2. Any time you start drawing on the canvas you'd want to enable the clear button again. All you probably have to do to accomplish this is to attach a listener to the beginStroke event and use that to enable your clear button again.

So you probably wouldn't even need to call isEmpty anytime during the whole process. Sorry, no time to provide you with a complete example, but hopefully this gives you somewhat of an idea.

[chattago2002]

Thanks for reply. I'm going to explain better my needs. The button I need has to be shown (or enabled) only if the canvas is not empty. It's like a "Proceed to next step" button, so after the signature the app loads some different components. To achieve this I need to check if canvas is empty or not because I must avoid the following step if the canvas is empty. I will not add particular cheks so the app will accept also an insignificant dot but it's useful to avoid careless errors.

[michaeldzjap]

Ok. Well either way, the same approach I sketched out would work for your requirements I think. Just have the button disabled by default and only enable it when someone starts drawing on the canvas. That last thing you could detect by listening to the beginStroke event.