How to access "pristine", "submitting" and "form.reset" outside the form in react-final-form?

Question

I would like to show above the form: "You have unsaved changes" (when the form is not pristine) with "Save" (submit) and "Discard" (reset) buttons.

How can I access things like "pristine", "submitting" and "form.reset" outside the form?

I could only find an example with external submit (https://final-form.org/docs/react-final-form/examples#external-submit) but these things doesn't seem to follow same patterns.

Answer 1

I wrapped my entire component in <Form> element. Seems to be the cleanest solution.