form-hooks - npm Package Compare versions

Comparing version 0.5.0-alpha.0 to 0.5.0-alpha.1

dist/form-hooks.cjs.development.js

@@ -6,3 +6,9 @@ 'use strict';
 const warnOnMissingName = (f) => console.warn(`${f} called without a "name" on input`);
-function useForm({ initialValues, onSubmit, validate, validateOnBlur = true, validateOnChange = true, }) {
+/**
+ * Default value for form-hook dependencies
+ */
+const noDependencies = () => [];
+function useForm(options, dependencies = noDependencies) {
+    const { initialValues, onSubmit, validate, validateOnBlur = true, validateOnChange = true, } = options;
+    const initialRender = react.useRef(true);
     const [errors, setErrors] = react.useState({});
@@ -13,2 +19,13 @@ const [values, setValues] = react.useState(initialValues);
     const [submitCount, setSubmitCount] = react.useState(0);
+    // Reinitialize the form when a listed dependency changes
+    react.useEffect(() => {
+        if (!initialRender.current) {
+            setErrors({});
+            setValues(initialValues);
+            setTouched({});
+            setIsSubmitting(false);
+            setSubmitCount(0);
+        }
+        initialRender.current = false;
+    }, dependencies(options));
     function value(event) {
@@ -15,0 +32,0 @@ // normalize values as Formik would

dist/form-hooks.cjs.production.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react");const t=e=>console.warn(`${e} called without a "name" on input`);exports.useForm=function({initialValues:n,onSubmit:r,validate:s,validateOnBlur:a=!0,validateOnChange:o=!0}){const[u,c]=e.useState({}),[i,l]=e.useState(n),[h,m]=e.useState({}),[b,d]=e.useState(!1),[v,f]=e.useState(0);function g(e){const{checked:t,type:n,value:r}=e.target;if(/number|range/.test(n)){const e=parseFloat(r);return isNaN(e)?"":e}return/checkbox/.test(n)?t:r}function O(e){return Promise.resolve(s(e||i)).then(e=>c(e))}function j(e){const t=Object.keys(n);return t.every(t=>e.indexOf(t)>-1)}return{errors:u,touched:h,values:i,handleBlur:function(e){const{name:n}=e.target;n||t("handleBlur"),m({...h,[n]:!0}),a&&j([...Object.keys(h),n])&&O()},handleChange:function(e){const{name:n}=e.target;n||t("handleChange");const r={...i,[n]:g(e)};l(r),o&&j(Object.keys(h))&&O(r)},handleSubmit:function(e){e.preventDefault(),d(!0),f(v+1);const t=[...Object.keys(i),...Object.keys(n)];return m(Object.assign({},...t.map(e=>({[e]:!0})))),Promise.resolve(s(i)).then(e=>(c(e),Object.keys(e).length?Promise.resolve():Promise.resolve(r(i)))).then(()=>d(!1)).catch(e=>(d(!1),Promise.reject(e)))},setErrors:c,isSubmitting:b,submitCount:v}};
+"use strict";var e=require("react");const t=e=>console.warn(`${e} called without a "name" on input`),n=()=>[];exports.useForm=function(r,s=n){const{initialValues:a,onSubmit:u,validate:c,validateOnBlur:o=!0,validateOnChange:i=!0}=r,l=e.useRef(!0),[h,m]=e.useState({}),[b,f]=e.useState(a),[d,v]=e.useState({}),[g,O]=e.useState(!1),[j,k]=e.useState(0);function y(e){const{checked:t,type:n,value:r}=e.target;if(/number|range/.test(n)){const e=parseFloat(r);return isNaN(e)?"":e}return/checkbox/.test(n)?t:r}function S(e){return Promise.resolve(c(e||b)).then(e=>m(e))}function p(e){const t=Object.keys(a);return t.every(t=>e.indexOf(t)>-1)}return e.useEffect(()=>{l.current||(m({}),f(a),v({}),O(!1),k(0)),l.current=!1},s(r)),{errors:h,touched:d,values:b,handleBlur:function(e){const{name:n}=e.target;n||t("handleBlur"),v({...d,[n]:!0}),o&&p([...Object.keys(d),n])&&S()},handleChange:function(e){const{name:n}=e.target;n||t("handleChange");const r={...b,[n]:y(e)};f(r),i&&p(Object.keys(d))&&S(r)},handleSubmit:function(e){e.preventDefault(),O(!0),k(j+1);const t=[...Object.keys(b),...Object.keys(a)];return v(Object.assign({},...t.map(e=>({[e]:!0})))),Promise.resolve(c(b)).then(e=>(m(e),Object.keys(e).length?Promise.resolve():Promise.resolve(u(b)))).then(()=>O(!1)).catch(e=>(O(!1),Promise.reject(e)))},setErrors:m,isSubmitting:g,submitCount:j}};
 //# sourceMappingURL=form-hooks.cjs.production.js.map

dist/form-hooks.es.production.js

@@ -1,2 +0,2 @@
-import{useState as e}from"react";const t=e=>console.warn(`${e} called without a "name" on input`);function n({initialValues:n,onSubmit:r,validate:o,validateOnBlur:s=!0,validateOnChange:a=!0}){const[c,i]=e({}),[u,l]=e(n),[h,m]=e({}),[b,d]=e(!1),[f,v]=e(0);function g(e){const{checked:t,type:n,value:r}=e.target;if(/number|range/.test(n)){const e=parseFloat(r);return isNaN(e)?"":e}return/checkbox/.test(n)?t:r}function O(e){return Promise.resolve(o(e||u)).then(e=>i(e))}function j(e){const t=Object.keys(n);return t.every(t=>e.indexOf(t)>-1)}return{errors:c,touched:h,values:u,handleBlur:function(e){const{name:n}=e.target;n||t("handleBlur"),m({...h,[n]:!0}),s&&j([...Object.keys(h),n])&&O()},handleChange:function(e){const{name:n}=e.target;n||t("handleChange");const r={...u,[n]:g(e)};l(r),a&&j(Object.keys(h))&&O(r)},handleSubmit:function(e){e.preventDefault(),d(!0),v(f+1);const t=[...Object.keys(u),...Object.keys(n)];return m(Object.assign({},...t.map(e=>({[e]:!0})))),Promise.resolve(o(u)).then(e=>(i(e),Object.keys(e).length?Promise.resolve():Promise.resolve(r(u)))).then(()=>d(!1)).catch(e=>(d(!1),Promise.reject(e)))},setErrors:i,isSubmitting:b,submitCount:f}}export{n as useForm};
+import{useRef as e,useState as t,useEffect as n}from"react";const r=e=>console.warn(`${e} called without a "name" on input`),o=()=>[];function s(s,a=o){const{initialValues:c,onSubmit:i,validate:u,validateOnBlur:l=!0,validateOnChange:h=!0}=s,m=e(!0),[b,d]=t({}),[f,v]=t(c),[g,O]=t({}),[j,k]=t(!1),[y,p]=t(0);function P(e){const{checked:t,type:n,value:r}=e.target;if(/number|range/.test(n)){const e=parseFloat(r);return isNaN(e)?"":e}return/checkbox/.test(n)?t:r}function C(e){return Promise.resolve(u(e||f)).then(e=>d(e))}function x(e){const t=Object.keys(c);return t.every(t=>e.indexOf(t)>-1)}return n(()=>{m.current||(d({}),v(c),O({}),k(!1),p(0)),m.current=!1},a(s)),{errors:b,touched:g,values:f,handleBlur:function(e){const{name:t}=e.target;t||r("handleBlur"),O({...g,[t]:!0}),l&&x([...Object.keys(g),t])&&C()},handleChange:function(e){const{name:t}=e.target;t||r("handleChange");const n={...f,[t]:P(e)};v(n),h&&x(Object.keys(g))&&C(n)},handleSubmit:function(e){e.preventDefault(),k(!0),p(y+1);const t=[...Object.keys(f),...Object.keys(c)];return O(Object.assign({},...t.map(e=>({[e]:!0})))),Promise.resolve(u(f)).then(e=>(d(e),Object.keys(e).length?Promise.resolve():Promise.resolve(i(f)))).then(()=>k(!1)).catch(e=>(k(!1),Promise.reject(e)))},setErrors:d,isSubmitting:j,submitCount:y}}export{s as useForm};
 //# sourceMappingURL=form-hooks.es.production.js.map

dist/form-hooks.umd.development.js

@@ -8,3 +8,9 @@ (function (global, factory) {
   const warnOnMissingName = (f) => console.warn(`${f} called without a "name" on input`);
-  function useForm({ initialValues, onSubmit, validate, validateOnBlur = true, validateOnChange = true, }) {
+  /**
+   * Default value for form-hook dependencies
+   */
+  const noDependencies = () => [];
+  function useForm(options, dependencies = noDependencies) {
+      const { initialValues, onSubmit, validate, validateOnBlur = true, validateOnChange = true, } = options;
+      const initialRender = react.useRef(true);
       const [errors, setErrors] = react.useState({});
@@ -15,2 +21,13 @@ const [values, setValues] = react.useState(initialValues);
       const [submitCount, setSubmitCount] = react.useState(0);
+      // Reinitialize the form when a listed dependency changes
+      react.useEffect(() => {
+          if (!initialRender.current) {
+              setErrors({});
+              setValues(initialValues);
+              setTouched({});
+              setIsSubmitting(false);
+              setSubmitCount(0);
+          }
+          initialRender.current = false;
+      }, dependencies(options));
       function value(event) {
@@ -17,0 +34,0 @@ // normalize values as Formik would

dist/form-hooks.umd.production.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):(e=e||self,t(e["form-hooks"]={},e.React))}(this,function(e,t){"use strict";const n=e=>console.warn(`${e} called without a "name" on input`);e.useForm=function({initialValues:e,onSubmit:s,validate:o,validateOnBlur:r=!0,validateOnChange:a=!0}){const[u,c]=t.useState({}),[i,l]=t.useState(e),[f,d]=t.useState({}),[h,m]=t.useState(!1),[b,p]=t.useState(0);function v(e){const{checked:t,type:n,value:s}=e.target;if(/number|range/.test(n)){const e=parseFloat(s);return isNaN(e)?"":e}return/checkbox/.test(n)?t:s}function y(e){return Promise.resolve(o(e||i)).then(e=>c(e))}function g(t){const n=Object.keys(e);return n.every(e=>t.indexOf(e)>-1)}return{errors:u,touched:f,values:i,handleBlur:function(e){const{name:t}=e.target;t||n("handleBlur"),d({...f,[t]:!0}),r&&g([...Object.keys(f),t])&&y()},handleChange:function(e){const{name:t}=e.target;t||n("handleChange");const s={...i,[t]:v(e)};l(s),a&&g(Object.keys(f))&&y(s)},handleSubmit:function(t){t.preventDefault(),m(!0),p(b+1);const n=[...Object.keys(i),...Object.keys(e)];return d(Object.assign({},...n.map(e=>({[e]:!0})))),Promise.resolve(o(i)).then(e=>(c(e),Object.keys(e).length?Promise.resolve():Promise.resolve(s(i)))).then(()=>m(!1)).catch(e=>(m(!1),Promise.reject(e)))},setErrors:c,isSubmitting:h,submitCount:b}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):(e=e||self,t(e["form-hooks"]={},e.React))}(this,function(e,t){"use strict";const n=e=>console.warn(`${e} called without a "name" on input`),r=()=>[];e.useForm=function(e,s=r){const{initialValues:o,onSubmit:u,validate:a,validateOnBlur:c=!0,validateOnChange:i=!0}=e,l=t.useRef(!0),[f,d]=t.useState({}),[h,m]=t.useState(o),[b,p]=t.useState({}),[v,y]=t.useState(!1),[g,O]=t.useState(0);function j(e){const{checked:t,type:n,value:r}=e.target;if(/number|range/.test(n)){const e=parseFloat(r);return isNaN(e)?"":e}return/checkbox/.test(n)?t:r}function k(e){return Promise.resolve(a(e||h)).then(e=>d(e))}function S(e){const t=Object.keys(o);return t.every(t=>e.indexOf(t)>-1)}return t.useEffect(()=>{l.current||(d({}),m(o),p({}),y(!1),O(0)),l.current=!1},s(e)),{errors:f,touched:b,values:h,handleBlur:function(e){const{name:t}=e.target;t||n("handleBlur"),p({...b,[t]:!0}),c&&S([...Object.keys(b),t])&&k()},handleChange:function(e){const{name:t}=e.target;t||n("handleChange");const r={...h,[t]:j(e)};m(r),i&&S(Object.keys(b))&&k(r)},handleSubmit:function(e){e.preventDefault(),y(!0),O(g+1);const t=[...Object.keys(h),...Object.keys(o)];return p(Object.assign({},...t.map(e=>({[e]:!0})))),Promise.resolve(a(h)).then(e=>(d(e),Object.keys(e).length?Promise.resolve():Promise.resolve(u(h)))).then(()=>y(!1)).catch(e=>(y(!1),Promise.reject(e)))},setErrors:d,isSubmitting:v,submitCount:g}}});
 //# sourceMappingURL=form-hooks.umd.production.js.map

dist/index.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" />
 };
+export declare type FormHookDependencies<Values> = (options: FormHookOptions<Values>) => FormHookOptions<Values>[keyof FormHookOptions<Values>][];
 export interface FormHookOptions<Values> {
@@ -75,2 +76,2 @@ /**
 }
-export declare function useForm<Values>({ initialValues, onSubmit, validate, validateOnBlur, validateOnChange, }: FormHookOptions<Values>): FormHookState<Values>;
+export declare function useForm<Values>(options: FormHookOptions<Values>, dependencies?: FormHookDependencies<Values>): FormHookState<Values>;

package.json

 {
   "name": "form-hooks",
-  "version": "0.5.0-alpha.0",
+  "version": "0.5.0-alpha.1",
   "description": "Easy forms in React with hooks",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

66399

increased by11.91%

Lines of code

315

increased by13.31%

No dependency changes