search

final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.39k stars 481 forks source link

[Suggestion] provide similar hook API to Formik and use-form #814

Open crobinson42 opened 4 years ago

crobinson42 commented 4 years ago

Are you submitting a bug report or a feature request?

Currently the only way to use react-final-form is inside a

render component - this makes it painfully non-react to do certain things like passing control of the submit or form state outside (to the parent) of the render component.

Can react-final-form provide a useForm() hook similar to how Formik and use-form pkg's offer the ability to simply create a "form state" from the hook call without a wrapping component or context provider?

I love react-final-form and use it in all my react and react-native projects but it's lacking in this specific area.

crobinson42 commented 4 years ago

Here's an immediate example I ran into today that I am not going to use react-final-form for because I can't do this cleanly:

I have a react-native app where I have a "Save" button in the top-right header/navbar when the form is dirty. Because the navbar is a different top level wrapper I would have to do some hacky stuff to pass the "handleSubmit" to the navbar as well as the pristine prop of the form. It would be way more simple if we could just do this with a hook const { formState: { pristine }, form: { handleSubmit } } = useStandaloneForm()...

crobinson42 commented 4 years ago

An idea: https://www.npmjs.com/package/react-use-form-control

LucianoGanga commented 4 years ago

Hello! I've the same use case, but in a regular react app. image

The save button is part of the parent component, and I don't want to have the form logic on the same page as the top bar.

Any ideas or workaround to this?

Thanks!

LucianoGanga commented 4 years ago

@crobinson42 , I found this: https://github.com/final-form/react-final-form/issues/551#issuecomment-510880871

Which helped me to use the form API from the topbar. I only have to create the ref in the component where I pass the arguments to the topbar, and then use the same ref down in the Form component.

I hope it helps you too!

Cheers! Luciano