Allow use of createForm() instance with <Form/>

typescript/ReactFinalForm.test.tsx

@@ -1,7 +1,7 @@
 /* tslint:disable: no-shadowed-variable */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
-import { Decorator, Mutator } from "final-form";
+import { Decorator, Mutator, createForm } from "final-form";
 import * as React from "react";
 import { Field, Form } from "react-final-form";
 
@@ -186,3 +186,19 @@ function withWrongTypedDecorator() {
     />
   );
 }
+
+// with form api instance
+function withFormApiInstance() {
+  return <Form form={createForm({ onSubmit: noop })} />;
+}
+
+// with form api instance & invalid prop
+function withFormApiInstanceAndSubmit() {
+  return (
+    <Form
+      form={createForm({ onSubmit: noop })}
+      // $ExpectError
+      onSubmit={noop}
+    />
+  );
+}

typescript/index.d.ts

@@ -79,18 +79,27 @@ export interface RenderableProps<T> {
   render?: (props: T) => React.ReactNode;
 }
 
-export interface FormProps<
-  FormValues = Record<string, any>,
-  InitialFormValues = Partial<FormValues>,
-> extends Config<FormValues, InitialFormValues>,
+interface FormManualProps<FormValues, InitialFormValues> {
+  form: FormApi<FormValues, InitialFormValues>;
+}
+
+interface FormAutoConfigureProps<FormValues, InitialFormValues>
+  extends Config<FormValues, InitialFormValues>,
     RenderableProps<FormRenderProps<FormValues, InitialFormValues>> {
   subscription?: FormSubscription;
   decorators?: Array<Decorator<FormValues, InitialFormValues>>;
-  form?: FormApi<FormValues, InitialFormValues>;
   initialValuesEqual?: (a?: AnyObject, b?: AnyObject) => boolean;
+  form?: undefined;
   [otherProp: string]: any;
 }
 
+export type FormProps<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+> =
+  | FormManualProps<FormValues, InitialFormValues>
+  | FormAutoConfigureProps<FormValues, InitialFormValues>;
+
 export interface UseFieldConfig<FieldValue, InputValue = any> {
   afterSubmit?: () => void;
   allowNull?: boolean;