Fix(useForm): conditional form not working

.changeset/twenty-rivers-doubt.md

@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+Fix(useForm): conditional form not working

app/src/Playground/index.tsx

@@ -1,16 +1,38 @@
+import { useState } from "react";
 import { useForm } from "react-cool-form";
 
-export default () => {
+const Form = () => {
+ const [show, setShow] = useState(true);
  const { form } = useForm({
  defaultValues: { test: "test" },
  onSubmit: (values, { formState }) =>
  console.log("onSubmit: ", formState.values),
  });
 
  return (
- <form ref={form}>
- <input name="test" />
- <input type="submit" />
- </form>
+ <>
+ <button type="button" onClick={() => setShow(!show)}>
+ Internal Toggle
+ </button>
+ {show && (
+ <form ref={form}>
+ <input name="test" />
+ <input type="submit" />
+ </form>
+ )}
+ </>
+ );
+};
+
+export default () => {
+ const [show, setShow] = useState(true);
+
+ return (
+ <>
+ <button type="button" onClick={() => setShow(!show)}>
+ External Toggle
+ </button>
+ {show && <Form />}
+ </>
  );
 };

docs/api-reference/use-form.md

@@ -159,9 +159,9 @@ An `object` with the following methods:
 
 ### form
 
-`React.RefObject`
+`(element: HTMLFormElement) => void`
 
-A React [ref](https://reactjs.org/docs/hooks-reference.html#useref) that allows you to [integrate a form with React Cool Form](./../getting-started/integration-an-existing-form).
+This method allows us to [integrate a form with React Cool Form](./../getting-started/integration-an-existing-form).
 
 ### field
 

docs/getting-started/integration-an-existing-form.md

@@ -7,7 +7,7 @@ title: Integration an Existing Form
 
 ## Hook into A Form
 
-To use React Cool Form, we just need to attach the [form](../api-reference/use-form#form) to the target element via the `ref` attribute. It acts as a **delegator** that will take care of all the values of [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), and [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) for us.
+To use React Cool Form, we just need to attach the [form](../api-reference/use-form#form) method to the target element via the `ref` attribute. It acts as a **delegator** that will take care of all the values of [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), and [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) for us.
 
 [![Edit RCF - Basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rcf-basic-17fz0?fontsize=14&hidenavigation=1&theme=dark)
 

src/hooks/index.ts

@@ -1,3 +1,2 @@
 export { default as useState } from "./useState";
 export { default as useLatest } from "./useLatest";
-export { default as useIsoLayoutEffect } from "./useIsoLayoutEffect";

src/types/index.ts

@@ -1,4 +1,4 @@
-import { FocusEvent, MutableRefObject, RefObject, SyntheticEvent } from "react";
+import { FocusEvent, MutableRefObject, SyntheticEvent } from "react";
 
 // Common
 export type Map = Record<string, boolean>;
@@ -46,6 +46,17 @@ export interface FormStateReturn<V> {
 // Form
 export type FormValues = Record<string, any>;
 
+interface Handler {
+ (event: Event): void;
+}
+
+export type Handlers = Partial<{
+ change: Handler;
+ blur: Handler;
+ submit: Handler;
+ reset: Handler;
+}>;
+
 export type FieldElement =
  | HTMLInputElement
  | HTMLTextAreaElement
@@ -107,11 +118,15 @@ interface FormValidator<V> {
  (values: V): FormErrors<V> | void | Promise<FormErrors<V> | void>;
 }
 
+export interface RegisterForm {
+ (element: HTMLFormElement | null): void;
+}
+
 export interface FieldValidator<V> {
  (value: any, values: V): any | Promise<any>;
 }
 
-export interface FieldRef<V> {
+export interface RegisterField<V> {
  (
  validateOrOptions:
  | FieldValidator<V>
@@ -231,8 +246,8 @@ export type Config<V> = Partial<{
 }>;
 
 export interface Return<V> {
- form: RefObject<HTMLFormElement>;
- field: FieldRef<V>;
+ form: RegisterForm;
+ field: RegisterField<V>;
  getState: GetState;
  setValue: SetValue;
  setTouched: SetTouched;

src/types/react-cool-form.d.ts

@@ -1,5 +1,5 @@
 declare module "react-cool-form" {
- import { FocusEvent, RefObject, SyntheticEvent } from "react";
+ import { FocusEvent, SyntheticEvent } from "react";
 
  type DeepProps<V, T = any> = {
  [K in keyof V]?: V[K] extends T ? T : DeepProps<V[K]>;
@@ -54,7 +54,11 @@ declare module "react-cool-form" {
  (name?: string | string[]): void;
  }
 
- interface FieldRef<V> {
+ interface RegisterForm {
+ (element: HTMLFormElement | null): void;
+ }
+
+ interface RegisterField<V> {
  (
  validateOrOptions:
  | FieldValidator<V>
@@ -200,8 +204,8 @@ declare module "react-cool-form" {
  }>;
 
  export interface Return<V = FormValues> {
- form: RefObject<HTMLFormElement>;
- field: FieldRef<V>;
+ form: RegisterForm;
+ field: RegisterField<V>;
  getState: GetState;
  setValue: SetValue;
  setTouched: SetTouched;