<FormProvider />

<FormProvider> enables the use of useField, useArrayField and useFormContext hooks to form with a deeply nested component structure.

Props

interface FormProviderProps {

form: FormContext;

}

FormContext

The form context returned by useForm.

Example

import React from "react";

import { useForm } from "react-next-form";

interface Values {

email: string;

}

function App() {

const form = useForm<Values>({

initialValues: { email: "" },

onSubmit: (values) => alert(values.name),

});

return (

<FormProvider form={form}>

<TextField name="email" />

<button onClick={form.submit}>Submit</button>

</FormProvider>

);

}

function TextField({ name }) {

const field = useField(name);

return <input placeholder="type your name" {...field.props} />;

}