agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad
https://agilgur5.github.io/react-signature-canvas/
Other
547 stars 119 forks source link

is there a way to disable the SignatureCanvas? #54

Closed kennblvnp closed 4 years ago

kennblvnp commented 4 years ago

like for example:

<SignatureCanvas disable={true} />

agilgur5 commented 4 years ago

Duplicate of #4 .

The documented props are the only ones available.

It doesn't seem like this use-case is altogether useful, as if you're not allowing them to write to the Canvas, you could just use a plain <img /> tag.

Zwyx commented 4 years ago

It doesn't seem like this use-case is altogether useful

I think it is useful, like disabled for input for example:

<input type="text" value={this.state.customModelName} onChange={this.handleChange} disabled={this.state.model !== "custom"} />

I needed myself to have SignatureCanvas disabled, so I did it this way:

    useEffect(() => {
        if (canvasRef.current) {
            if (readOnly || disabled) {
                canvasRef.current.off();
            } else {
                canvasRef.current.on();
            }
        }
    }, [readOnly, disabled]);

It is true that you can use an <img /> tag to display a read only signature, but you might find it better to keep the SignatureCanvas component (for instance if you applied some nice CSS to you component), for the same reason that you might don't want to use a label to display a read only input.

agilgur5 commented 4 years ago

I think it is useful, like disabled for input for example:

I said this to your comment in the other thread, but like a style, an analogy isn't a use-case. The use-cases for a signature pad are not the same as the use-cases for a text input. As a maintainer, I need to validate and measure real use-cases of this component -- concrete examples are most helpful to convey that, as opposed to abstract comparisons.

I asked in #4 for an elaboration as well and didn't receive one and OP there was satisfied with using an image tag. To me those are signals that the need is not altogether that great, as well as that it's been 3+ years since it was brought up, despite significant upticks in usage. That is a measurement of use-case.

for instance if you applied some nice CSS to you component

This would be a use-case, and here is a validation: You could use the same CSS on an image tag. You'd also want to visually cue the user that it is disabled as well, an image tag is one way of doing so. Notably, this component has no styles, so adding a capability like that internally has some potential trade-offs to it, as it would make it easy to disable without adding a visual cue.

for the same reason that you might don't want to use a label to display a read only input

The use-cases are different though. Most inputs can be edited and generally have more states. A signature is basically either "Done" or not; it's normally like a sub-form or a Captcha

An input element also has a disabled state and disabled style, whereas a canvas does not. The only way to disable a canvas is to turn off events on it, exactly what off is short-hand for.

There are use-cases I can think of for a disabled prop, however I haven't really seen or experienced RL usage with those; forms with signatures are generally used in one of two ways, fairly similar to Captchas.