diff --git a/src/ReactFinalForm.js b/src/ReactFinalForm.js index a5865684..e68fb4ef 100644 --- a/src/ReactFinalForm.js +++ b/src/ReactFinalForm.js @@ -42,6 +42,7 @@ function ReactFinalForm({ debug, decorators, destroyOnUnregister, + form: alternateFormApi, initialValues, initialValuesEqual, keepDirtyOnReinitialize, @@ -65,7 +66,7 @@ function ReactFinalForm({ } const form: FormApi = useConstant(() => { - const f = createForm(config) + const f = alternateFormApi || createForm(config) f.pauseValidation() return f }) diff --git a/src/ReactFinalForm.test.js b/src/ReactFinalForm.test.js index 94aa74f6..e80ac3d3 100644 --- a/src/ReactFinalForm.test.js +++ b/src/ReactFinalForm.test.js @@ -3,6 +3,7 @@ import { render, fireEvent, cleanup } from 'react-testing-library' import 'jest-dom/extend-expect' import deepEqual from 'fast-deep-equal' import { ErrorBoundary, Toggle, wrapWith } from './testUtils' +import { createForm } from 'final-form' import Form from './ReactFinalForm' import Field from './Field' @@ -907,4 +908,27 @@ describe('ReactFinalForm', () => { expect(recordSubmitting).toHaveBeenCalledTimes(3) expect(recordSubmitting.mock.calls[2][0]).toBe(false) }) + + it('should allow an alternative form api to be passed in', () => { + const onSubmit = jest.fn() + const form = createForm({ onSubmit: onSubmit }) + const formMock = jest.spyOn(form, 'registerField') + render( +
+ {({ handleSubmit }) => ( + + + + )} + + ) + expect(formMock).toHaveBeenCalled() + + // called once on first render to get initial state, and then again to subscribe + expect(formMock).toHaveBeenCalledTimes(2) + expect(formMock.mock.calls[0][0]).toBe('name') + expect(formMock.mock.calls[0][2].active).toBe(true) // default subscription + expect(formMock.mock.calls[1][0]).toBe('name') + expect(formMock.mock.calls[1][2].active).toBe(true) // default subscription + }) }) diff --git a/src/types.js.flow b/src/types.js.flow index b974c767..85574a1c 100644 --- a/src/types.js.flow +++ b/src/types.js.flow @@ -68,6 +68,7 @@ export type RenderableProps = { export type FormProps = { subscription?: FormSubscription, decorators?: Decorator[], + form?: FormApi, initialValuesEqual?: (?Object, ?Object) => boolean } & Config & RenderableProps> diff --git a/typescript/index.d.ts b/typescript/index.d.ts index 3194b402..b0cce9e2 100644 --- a/typescript/index.d.ts +++ b/typescript/index.d.ts @@ -60,6 +60,7 @@ export interface FormProps RenderableProps> { subscription?: FormSubscription; decorators?: Decorator[]; + form?: FormApi; initialValuesEqual?: (a?: object, b?: object) => boolean; }