UNPKG

react-hook-form

Version:

Performant, flexible and extensible forms library for React Hooks

65 lines 2.45 kB
import React from 'react'; import { FieldValues, FormProviderProps, UseFormReturn } from './types'; /** * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}. * * @remarks * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi) * * @returns return all useForm methods * * @example * ```tsx * function App() { * const methods = useForm(); * const onSubmit = data => console.log(data); * * return ( * <FormProvider {...methods} > * <form onSubmit={methods.handleSubmit(onSubmit)}> * <NestedInput /> * <input type="submit" /> * </form> * </FormProvider> * ); * } * * function NestedInput() { * const { register } = useFormContext(); // retrieve all hook methods * return <input {...register("test")} />; * } * ``` */ export declare const useFormContext: <TFieldValues extends FieldValues, TContext = any, TransformedValues extends FieldValues | undefined = undefined>() => UseFormReturn<TFieldValues, TContext, TransformedValues>; /** * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}. * * @remarks * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi) * * @param props - all useForm methods * * @example * ```tsx * function App() { * const methods = useForm(); * const onSubmit = data => console.log(data); * * return ( * <FormProvider {...methods} > * <form onSubmit={methods.handleSubmit(onSubmit)}> * <NestedInput /> * <input type="submit" /> * </form> * </FormProvider> * ); * } * * function NestedInput() { * const { register } = useFormContext(); // retrieve all hook methods * return <input {...register("test")} />; * } * ``` */ export declare const FormProvider: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element; //# sourceMappingURL=useFormContext.d.ts.map