formik - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

es6/index.d.ts

@@ -30,6 +30,6 @@ /// <reference types="react" />
     isSubmitting: boolean;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-    onChange: (e: React.ChangeEvent<any>) => void;
-    onBlur: (e: any) => void;
-    onChangeValue: (name: string, value: any) => void;
+    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    handleChange: (e: React.ChangeEvent<any>) => void;
+    handleBlur: (e: any) => void;
+    handleChangeValue: (name: string, value: any) => void;
     setError: (e: any) => void;
@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void;

es6/index.js

@@ -53,3 +53,3 @@ import * as tslib_1 from "tslib";
         var values = _a.values, error = _a.error, errors = _a.errors, touched = _a.touched, isSubmitting = _a.isSubmitting, setError = _a.setError, setErrors = _a.setErrors, setValues = _a.setValues, setTouched = _a.setTouched, setSubmitting = _a.setSubmitting, rest = tslib_1.__rest(_a, ["values", "error", "errors", "touched", "isSubmitting", "setError", "setErrors", "setValues", "setTouched", "setSubmitting"]);
-        return (tslib_1.__assign({ onChange: function (e) {
+        return (tslib_1.__assign({ handleChange: function (e) {
                 e.persist();
@@ -69,7 +69,7 @@ var _a = e.target, type = _a.type, name = _a.name, value = _a.value, checked = _a.checked;
                 var _b, _c;
-            }, onBlur: function (e) {
+            }, handleBlur: function (e) {
                 e.persist();
                 setTouched(tslib_1.__assign({}, values, (_a = {}, _a[e.target.name] = true, _a)));
                 var _a;
-            }, onChangeValue: function (name, value) {
+            }, handleChangeValue: function (name, value) {
                 // Set changed fields as touched
@@ -82,3 +82,3 @@ setTouched(tslib_1.__assign({}, touched, (_a = {}, _a[name] = true, _a)));
                 var _a, _b, _c;
-            }, onSubmit: function (e) {
+            }, handleSubmit: function (e) {
                 e.preventDefault();
@@ -113,3 +113,3 @@ setTouched(touchAllFields(values));
                 }
-            }, onReset: function () {
+            }, handleReset: function () {
                 setSubmitting(false);
@@ -116,0 +116,0 @@ setErrors({});

lib/index.d.ts

@@ -30,6 +30,6 @@ /// <reference types="react" />
     isSubmitting: boolean;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-    onChange: (e: React.ChangeEvent<any>) => void;
-    onBlur: (e: any) => void;
-    onChangeValue: (name: string, value: any) => void;
+    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    handleChange: (e: React.ChangeEvent<any>) => void;
+    handleBlur: (e: any) => void;
+    handleChangeValue: (name: string, value: any) => void;
     setError: (e: any) => void;
@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void;

package.json

 {
   "name": "formik",
   "description": "An elegant way to handle forms in React",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "author": "Jared Palmer <[e-mail]>",

README.md

@@ -29,7 +29,7 @@ # Formik
 - `error: any` - A top-level error object, can be whatever you need.
-- `onSubmit: (e: React.FormEvent<HTMLFormEvent>) => void` - Submit handler. This should be passed to `<form onSubmit={onSubmit}>...</form>`
-- `onReset: () => void` - Reset handler. This should be passed to `<button onClick={onReset}>...</button>`
+- `handleSubmit: (e: React.FormEvent<HTMLFormEvent>) => void` - Submit handler. This should be passed to `<form onSubmit={onSubmit}>...</form>`
+- `handleReset: () => void` - Reset handler. This should be passed to `<button onClick={handleReset}>...</button>`
 - `isSubmitting: boolean` - Submitting state. Either true or false.
-- `onChange: (e: React.ChangeEvent<any>) => void` - General onChange event handler. This will update the form value according to an `<input/>`'s `name` attribute.
-- `onChangeValue: (name: string, value: any) => void` - Custom onChange handler. Use this when you have custom inputs (e.g. react-autocomplete). `name` should match the form value you wish to update.
+- `handleChange: (e: React.ChangeEvent<any>) => void` - General onChange event handler. This will update the form value according to an `<input/>`'s `name` attribute.
+- `handleChangeValue: (name: string, value: any) => void` - Custom onChange handler. Use this when you have custom inputs (e.g. react-autocomplete). `name` should match the form value you wish to update.
 
@@ -77,7 +77,7 @@
 // are injected into a prop called `values`. Additionally, Formik injects
-// a single onChange handler that you can use on every input. You also get
-// onSubmit, errors, and isSubmitting for free. This makes building custom
+// an onChange handler that you can use on every input. You also get
+// handleSubmit, errors, and isSubmitting for free. This makes building custom
 // inputs easy.
-const SimpleForm = ({ values, onChange, onSubmit, onReset, errors, error isSubmitting,  }) =>
-  <form onSubmit={onSubmit}>
+const SimpleForm = ({ values, handleChange, handleSubmit, handleReset, errors, error, isSubmitting,  }) =>
+  <form onSubmit={handleSubmit}>
     <input
@@ -87,3 +87,3 @@ type="text"
       value={values.email}
-      onChange={onChange}
+      onChange={handleChange}
       placeholder="[e-mail]"
@@ -96,3 +96,3 @@ />
       value={values.facebook}
-      onChange={onChange}
+      onChange={handleChange}
       placeholder="facebook username"
@@ -105,3 +105,3 @@ />
       value={values.twitter}
-      onChange={onChange}
+      onChange={handleChange}
       placeholder="twitter username"
@@ -111,3 +111,3 @@ />
     {error && error.message && <div style={{color: 'red'}}>Top Level Error: {error.message}</div>}
-    <button onClick={onReset}>Reset</button>
+    <button onClick={handleReset}>Reset</button>
     <button type="submit" disabled={isSubmitting}>Submit</button>
@@ -114,0 +114,0 @@ </form>;

umd/index.d.ts

@@ -30,6 +30,6 @@ /// <reference types="react" />
     isSubmitting: boolean;
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-    onChange: (e: React.ChangeEvent<any>) => void;
-    onBlur: (e: any) => void;
-    onChangeValue: (name: string, value: any) => void;
+    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    handleChange: (e: React.ChangeEvent<any>) => void;
+    handleBlur: (e: any) => void;
+    handleChangeValue: (name: string, value: any) => void;
     setError: (e: any) => void;
@@ -36,0 +36,0 @@ resetForm: (nextProps?: Props) => void;

No alert changes

Improved metrics

Total package byte prevSize

152106

0.1%

No dependency changes