remove trigger and replaced with mode

Author: bluebill1049

README.md

@@ -80,7 +80,7 @@ function App() {
 | `setValue`  | Function  |    ✓     | React Hook Form <a href="https://react-hook-form.com/api#setValue">setValue</a> function                         |
 | `register`  | Function  |    ✓     | React Hook Form <a href="https://react-hook-form.com/api#register">register</a> function                         |
 | `name`      | string    |    ✓     | Unique name for React Hook Form to register the input                                                            |
-| `trigger`   | boolean   |          | Should trigger validation                                                                                        |
+| `mode`      | string    |          | default to `onSubmit`                                                                                            |
 | `rules`     | Object    |          | Validation rules according to <a href="https://react-hook-form.com/api#register">register</a> at React Hook Form |
 | `type`      | string    |          | Currently support `checkbox` or `input` input type includes: `radio` and `select`                                |
 | `value`     | string    |          | value can be applied for `checkbox`                                                                              |

src/index.test.tsx

@@ -56,6 +56,6 @@ describe('React Hook Form Input', () => {
       },
     });
 
-    expect(setValue).toBeCalledWith('test', 'test', undefined);
+    expect(setValue).toBeCalledWith('test', 'test', false);
   });
 });

src/index.tsx

@@ -28,38 +28,55 @@ type Props = {
   rules?: ValidationOptions;
   value?: string | boolean;
   onChange?: (value: any) => void;
-  trigger?: boolean;
+  onBlur?: (value: any) => void;
+  mode?: 'onBlur' | 'onChange' | 'onSubmit';
 };
 
+function getValue(e: any, { isCheckbox }: { isCheckbox: boolean }) {
+  return e.target ? (isCheckbox ? e.target.checked : e.target.value) : e;
+}
+
 const HookFormInput = ({
   setValue,
   name,
   register,
   rules,
-  trigger,
+  mode = 'onSubmit',
   component,
   onChange,
+  onBlur,
   type,
   value,
   ...rest
 }: Props) => {
   const isCheckbox = type === 'checkbox';
+  const isOnChange = mode === 'onChange';
+  const isOnBlur = mode === 'onBlur';
   const [inputValue, setInputValue] = React.useState(isCheckbox ? false : '');
   const valueRef = React.useRef();
-  const handleChange = (e: any) => {
-    const data = e.target
-      ? isCheckbox
-        ? e.target.checked
-        : e.target.value
-      : e;
+  const commonTask = (e: any) => {
+    const data = getValue(e, { isCheckbox });
     setInputValue(data);
-    setValue(name, data, trigger);
     valueRef.current = data;
+    return data;
+  };
+
+  const handleChange = (e: any) => {
+    const data = commonTask(e);
+    setValue(name, data, isOnChange);
     if (onChange) {
       onChange(e);
     }
   };
 
+  const handleBlur = (e: any) => {
+    const data = commonTask(e);
+    setValue(name, data, isOnBlur);
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+
   React.useEffect(() => {
     register(
       Object.defineProperty(
@@ -85,6 +102,7 @@ const HookFormInput = ({
   return React.cloneElement(component, {
     ...rest,
     onChange: handleChange,
+    ...(isOnBlur ? { onBlur: handleBlur } : {}),
     value: value || inputValue,
     ...(isCheckbox ? { checked: inputValue } : {}),
   });