This library was conceived before the TS and Flow teams had formalized how to type hooks. I still have not looked into it, but if someone knows how, it would be great to get some typing while the library is still so tiny.

I wouldn't even object to a strong TS lover converting the library itself to TS, ideally with Flow types also exported.

Thanks in advance. 🙏

Delighted.

Does react-final-form-hooks support TypeScript?

It seems that any type definition files for TypeScript (*.d.ts) are not exported in node_modules/react-final-form-hooks/dist when I introduced react-final-form-hooks from npm, although it exists in the original repository of react-final-form-hooks.
Because of this, items of react-final-form-hooks could not be imported on a TypeScript project.

Thank you.

Are you submitting a bug report or a feature request?

What is the current behavior?

What is the expected behavior?

Sandbox Link

What's your environment?

Other information

Are you submitting a bug report or a feature request?

What is the current behavior?

What is the expected behavior?

Sandbox Link

What's your environment?

Other information

Are you submitting a bug report or a feature request?

bug report (but actually warning report)

What is the current behavior?

I get the following warning when using react-final-form-hooks in React 17.

warning " > [email protected]" has incorrect peer dependency "react@^16.8.1".

What is the expected behavior?

No warnings.

Sandbox Link

None.

What's your environment?

• react-final-form-hooks: 2.0.2
• OS: maxOS
• Node version: v16.10.0

Other information

None.

I was following this example https://codesandbox.io/s/40mr0v2r87 on React Final Form - Array Fields. I use third-party component ReactSelectAdapter in the field for my cascading select. The text in the dropdown has a white font just like the background. I looked through the styles but I can't figure out where to change the font color of the select lists.

Is this a bug or is there anywhere in the Style.js file where I can do that?

Are you submitting a bug report or a feature request?

What is the current behavior?

What is the expected behavior?

Sandbox Link

What's your environment?

Other information

Current behavior

I specify "submitting: true" and "pristine: true" to useForm subscription and form is render all the time

Expected Behavior

Form is render only when submitting and pristine change

CodeSanbox

Apparently the following is not allowed:

const Compo = () => {
  useForm();
}

I know it's kinda silly because presumably any reasonable usage would pass some {validate} or {initialValues} or {onSubmit} to the form hook...

This page links to a codesandbox example that uses an outdated alpha version of the library:
https://github.com/final-form/react-final-form-hooks#simple-example

It took me a while to find out why some editions I made in that code did not work.
Turns out just switching to a more up-to-date of the library fixed the errors for me.

Question on how to use these hooks to best suit a checkbox. It may be pretty trivial but I got confused trying to implement.

Codesandbox

https://codesandbox.io/s/ymoljj2qpv

const Form = () => {
  const { form, handleSubmit, values } = useForm({
    onSubmit: values => console.log(values),
    initialValues: { check: true }
  })
  const check = useField('text', form)
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          id={check.input.name}
          type="checkbox"
          value={check.input.value}
          {...check.input}
        />
        <label htmlFor={check.input.name}>
          Checkbox!
        </label>
      </div>

      <div>
        <pre>{JSON.stringify(values, null, 2)}</pre>
      </div>
    </form>
  )
}

Any information or direction on this would be awesome. Thank you so much for the library and if you can get any feedback to me on this I would greatly appreciate it!

Are you submitting a bug report or a feature request?

Feature request.

With introduction of React Hooks I found myself using "Presentational and Container Components" pattern less, instead using hooks as reusable and composable tools.

Most of the times I want to create form without subscriptions at parent component, pass it down with props or context and deal with it's state and handlers in child components.

So I came up with this proposal.

useFormAPI

Unlike useForm, this hook will not create handleSubmit or subscribe to form.

const form = useFormAPI({ onSubmit });

return <LoginForm form={form} />;

useFormSubmitCallback

Utility hook to create submit callback for form.

function LoginForm({ form }) {
  const handleSubmit = useFormSubmitCallback(form);

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

useFieldMeta

Unlike useField it does not expose input props and returns null as a first result.

const { values } = useFormState(form, { values: true });
const postSlugMeta = useFieldMeta("slug", {} /* Do not subscribe. */);

useEffect(() => {
  if (postSlugMeta != null) {
    postSlugMeta.change(toKebabCase(values.title));
  }
}, [values.title, postSlugMeta != null]);

Input based hooks

E.g:

• useTextField
• useFileField
• useNumberField
• useCheckboxField

Unlike react-final-form, hooks API does't accept type of input, and it's good, this means that we can create custom hook for each type and expose only related props to this input type.
And don't let me start on type system and tree shaking benefits.

Feature request

I'm trying to add a small array to one of my forms, but it doesn't seem to be supported at the moment.

Currently, when I to useField on a field that has an array in initialValues, the returned field will have an empty string as .input.value instead of the array passed with initialValues.

Any chance of supporting this? Maybe with a useArrayField()? 🤔

Are you submitting a bug report or a feature request?

A bug, pristine value is incorrect when filling a field, then emptying it.

What is the current behavior?

Initial render => the form is pristine
I fill a field => the form is dirty
I empty the field => the form is still dirty

What is the expected behavior?

Initial render => the form is pristine
I fill a field => the form is dirty
I empty the field => the form is pristine again

Sandbox Link

Works as intended in RFF but not in RFFH:

RFF : https://zn82m7zlrp.codesandbox.io/
vs
RFFH : https://71y11y0v1.codesandbox.io/

What's your environment?

final-form : 4.12.0
react-final-form-hoooks : 1.0.1

Other information

Thank you for all your awesome work :)

What is the current behavior?

Field initial value 0 becomes empty string ""

What is the expected behavior?

Field initial value 0 is 0

Sandbox Link

https://codesandbox.io/s/42o278xzq4

What's your environment?

  "dependencies": {
    "final-form": "4.11.0",
    "react": "16.8.0-alpha.1",
    "react-dom": "16.8.0-alpha.1",
    "react-final-form-hooks": "1.0.0-alpha.1",
    "react-scripts": "2.0.3"
  },

Are you submitting a bug report or a feature request?

feature request

What is the expected behavior?

just like react-final-form.

Are you submitting a bug report or a feature request?

feature request (or more like a performance request)

What is the current behavior?

onBlur, onChange and onFocus from useForm(...).input do not maintain referential equality between renders. Therefore React.memo is hard to correctly implement.

What is the expected behavior?

Preferably the aforementioned functions (onBlur, onChange and onFocus) would be referentially equal between renders.

What's your environment?

"react-dom": "16.8.2"
"final-form": "^4.11.1"
"react-final-form-hooks": "^1.0.0"

Other information

Are you submitting a bug report or a feature request?

Bug

What is the current behavior?

Using a nested JSON object in initialValues causes infinite re-renders.
Also, form fields can't be changed.

Steps-

1. Open the code sandbox link
2. Try to change the first name and last name fields
3. Open console to see the infinite re-render console log messages

Example -

const Test = () => {
  const { form, handleSubmit, values, pristine, submitting } = useForm({
    onSubmit,
    validate,
    initialValues: {
      name: {
        firstName: 'Clark',
        lastName: 'Kent',
      }
    }
  });

What is the expected behavior?

Form should render once with initial values.
And we should be able to update form field values.

Sandbox Link

https://codesandbox.io/s/cold-https-6v26o

What's your environment?

node: v10.2.1
react-final-form-hooks: "2.0.0",
Mac OS Mojave 10.14.2

Other information

Screenshot

Are you submitting a bug report or a feature request?

What is the current behavior?

What is the expected behavior?

Sandbox Link

What's your environment?

Other information

I wanted to use hooks with final-form, so was trying to do it myself. Then came across this repo. You tried with hooks and explained the downsides. I obviously can't do it as good as you as you understand the final-form best. I really really appreciate you taking the time to write this, and explain why we shouldn't, right there in the README. It helped me make the fastest trade-off evalutation ever. Thank you @erikras !

How do you reset the form after successful submitting it?

Thank you.

The 4efbdfb commit (in May) added the dependency (not even devDependency) from the np package. This is most likely an error because this package is not used in any way either in the code or during building.

As a result, when using react-final-form-form-hooks we also get dependence on a quite large package np and all its dependencies.

how to make select dropdown, where we will be able to select multiple options,
just like select2

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

Since version 1.0.1 it seems, that values initialized with an empty array leads to a Maximum call stack size exceeded error.

What is the expected behavior?

That I can operate on this array like in version 1.0.0-alpha.1.

Sandbox Link

https://codesandbox.io/s/react-final-form-hooks-simple-example-82tcn?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js

You can switch between the versions, which should result in the described behaviour. Could it be, that this use case handling arrays and objects should be handled differently now?

Either I'm misunderstanding something, or there seems to be some space for improvement for using this with react-native and typescript. The hickup I bumped into was

export interface FieldRenderProps<FieldValue, T extends HTMLElement> {
  input: FieldInputProps<FieldValue, T>;
  meta: FieldMetaState<FieldValue>;
}

.... 

interface FieldInputProps<FieldValue, T extends HTMLElement> {
  name: string;
  onBlur: (event?: React.FocusEvent<T>) => void;
  onChange: (event: React.ChangeEvent<T> | any) => void;
  onFocus: (event?: React.FocusEvent<T>) => void;
  type?: string;
  value: FieldValue;
  checked?: boolean;
  multiple?: boolean;
}

And, I'd venture, HTMLElement isn't something used in react-native. If you point me in the right direction, I would probably be able to put in the leg-work to make it work.

The library itself seems to be working fine.

Quick fix would be to use something like

 FieldRenderProps<string, HTMLElement>

Are you submitting a bug report or a feature request?

feature request React Native support 🎉

Why is this needed:

Currently, Final form only works with web projects using ReactJS but a port to React Native could be created.

feature request

Would like guidance on implementing field level validation, parse, and format functions.

validating的状态好像一直都没有变化啊

Version: [email protected]

I'm not able to use the latest release 1.0.0. I get following excpetion: "Uncaught TypeError: form.setConfig is not a function"
Here is a simple example: https://codesandbox.io/s/n03r1q8omm

When I look at the source, the problem is, that you access the "form" object instead of "form.current" or "getForm()".

Does anyone have experience in writing tests with hooks? There should be no need to test the part that Final Form does (e.g. does a field become dirty when the value changes), but we need something in place to evaluate new features as they get added, and to ensure that a PR doesn't break the whole library.

Maybe something along these lines?

If anyone would like to give this a shot, it would be greatly appreciated! 🙏

Are you submitting a bug report or a feature request?

bug report

Sandbox Link

https://codesandbox.io/s/m38k650n79

See the console.

Other information

I see the source code of useField and find the reason.

In react function, every render will product new validate function.So it will cause this problem. Although we can use useCallback to avoid it.But it's so hard to use for user.Can we use useCallback in the inner or something else to solve this.

Feature request

I was trying to use the library with a file type input, when I came across the submit response I saw that the value of the inputs return C:\fakepath\<filename>, which is not very useful. So I came to github to take a look at the source codes and noticed that something similar could be done with pr #9

I could send a pr if it is also allowed

Thanks for attention