useFormContext.d.ts 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import React from 'react';
  2. import { FieldValues, FormProviderProps, UseFormReturn } from './types';
  3. /**
  4. * 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}.
  5. *
  6. * @remarks
  7. * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
  8. *
  9. * @returns return all useForm methods
  10. *
  11. * @example
  12. * ```tsx
  13. * function App() {
  14. * const methods = useForm();
  15. * const onSubmit = data => console.log(data);
  16. *
  17. * return (
  18. * <FormProvider {...methods} >
  19. * <form onSubmit={methods.handleSubmit(onSubmit)}>
  20. * <NestedInput />
  21. * <input type="submit" />
  22. * </form>
  23. * </FormProvider>
  24. * );
  25. * }
  26. *
  27. * function NestedInput() {
  28. * const { register } = useFormContext(); // retrieve all hook methods
  29. * return <input {...register("test")} />;
  30. * }
  31. * ```
  32. */
  33. export declare const useFormContext: <TFieldValues extends FieldValues, TContext = any, TransformedValues extends FieldValues = TFieldValues>() => UseFormReturn<TFieldValues, TContext, TransformedValues>;
  34. /**
  35. * 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}.
  36. *
  37. * @remarks
  38. * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
  39. *
  40. * @param props - all useForm methods
  41. *
  42. * @example
  43. * ```tsx
  44. * function App() {
  45. * const methods = useForm();
  46. * const onSubmit = data => console.log(data);
  47. *
  48. * return (
  49. * <FormProvider {...methods} >
  50. * <form onSubmit={methods.handleSubmit(onSubmit)}>
  51. * <NestedInput />
  52. * <input type="submit" />
  53. * </form>
  54. * </FormProvider>
  55. * );
  56. * }
  57. *
  58. * function NestedInput() {
  59. * const { register } = useFormContext(); // retrieve all hook methods
  60. * return <input {...register("test")} />;
  61. * }
  62. * ```
  63. */
  64. export declare const FormProvider: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues = TFieldValues>(props: FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
  65. //# sourceMappingURL=useFormContext.d.ts.map