Closed darshanksexathought closed 4 years ago
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:
Context2D
).react-final-form
exist, 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.
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.
You're right, I wasn't clear here. The use-case I had in mind (my use-case) was to set the data for a read only component, as talked in https://github.com/agilgur5/react-signature-canvas/issues/54.
when this is rendered the ref variable is still the default
{}
how can we set a value when it is rendered?