how to pre-populate the canvas?
darshanksexathought opened this issue · comments
<SignatureCanvas
penColor='green'
canvasProps={{width: 500, height: 200, className: 'sigCanvas'}}
ref={(ref) => { this.sigPad = ref }} />when this is rendered the ref variable is still the default {}
how can we set a value when it is rendered?
I'm not really sure why you'd want to pre-populate the data -- normally one fills out a signature from scratch.
In the example, I use a standard <img /> tag to show an existing signature. (potentially related to #4 )
That being said, there are fromData and fromDataURL methods exposed in the API and that's how you'd populate it.
when this is rendered the ref variable is still the default
{}
React refs only get set after the component has been mounted (in newer APIs like createRef or hooks' useRef, this is when ref.current exists). So you can only use one inside of or after componentDidMount has been called.
So, to pre-populate, one would:
componentDidMount = () => {
this.sigPad.fromDataURL(...)
}
I'm not really sure why you'd want to pre-populate the data
I believe it goes more toward the React style of doing things: declarative instead of imperative.
It also has to do with controlled components. Using ref is associated with uncontrolled components.
For instance, here's a typical input in React:
<input type="text" value={this.state.value} onChange={this.handleChange} />For SignatureCanvas, it would be:
<SignatureCanvas
data={this.state.signature} // Type of `this.state.signature` could be `SignaturePad.Point[][]`
onEnd={data => this.setState({signature: data})}
/>What's you opinion?
Anyway, thank you for having created react-signature-canvas ;-)
@Zwyx I built one of the first production websites to use React and have been using it for almost 6 years (react-signature-canvas itself is 4 years old), I'm well aware of what idiomatic React looks like.
Just because React prefers or has an opinion toward some style, does not mean that it is always appropriate in all situations:
- Most wrapper components are not controlled and they really can't be (back in the day, many React components were wrappers around jQuery components, which are quite imperative).
- The Canvas element itself doesn't even work like that, it stores data internally and has its own rendering engine (
Context2D). - Forms have been a pain point in React for years as well because they don't mesh well with the model either (and why advanced tooling like
react-final-formexist, as well as hundreds of other form libraries).
This component is all 3 of those.
This component normally pairs with "Clear" and "Done" buttons, which are also imperative. You can wrap all those in one component and return a signature on onDone or something to mesh with a declarative form.
It would basically be a sub-form that returns values when completed.
The usage is also similar to a Captcha if that helps with your mental model.
For
SignatureCanvas, it would be:
Other than this being really hacky to achieve (if even achievable), it would also be quite inefficient and could cause lag. A Canvas element doesn't work like that, so this is basically asking to transform data in and out on each stroke. A signature pad must be low latency though.
Using ref is associated with uncontrolled components.
Yes, this is basically an uncontrolled component and one can/should use it as such. Latency is also a common use for uncontrolled components. E.g. if you have a controlled <textarea /> with enough text in it, you'll notice it starts to lag; DraftJS works very differently from an idiomatic controlled React component as well.
I believe it goes more toward the React style of doing things
That doesn't really answer the question, a style is not a use-case. The only use-case I see is editing, and one isn't normally allowed to edit a signature, as I've said. One wouldn't pre-populate a consent checkbox or a Captcha either.
I'm also not sure OP was thinking what you were either and I would ask to not hijack existing threads. You can create a separate issue instead.