Update getting started

Author: CodeStix

articles/Getting-started.md

@@ -11,7 +11,7 @@ npm install --save typed-react-form
 yarn add typed-react-form
 ```
 
-This library works with both **Javascript** and **Typescript**. **Typescript** is certainly preferred because of the enforced type-checking!
+This library works with both **Javascript** and **Typescript**. Typescript is certainly preferred because of the enforced type-checking!
 
 ## Step 2: Creating a form
 
@@ -34,7 +34,8 @@ function MyForm() {
 
 ### Creating the submit handler
 
-**typed-react-form** does not expose any submit events or helpers, you must implement your own submitting procedure. This is typically done by using the `<form>` html element with the `onSubmit` event and using a submit button.
+Pass `form.handleSubmit` to the form's `onSubmit` prop to validate before calling your callback function.
+You can also just use a `<button>` and submitting in the button's `onClick` handler, but this event does not fire when pressing return/enter in a text input!
 
 ✔️ **`<form>` element with `onSubmit` event**
 
@@ -43,29 +44,27 @@ import { useForm } from "typed-react-form";
 
 function MyForm() {
     const form = useForm({ email: "" });
-    // Use the html form element, which exposes the onSubmit event.
+    // Use the standard html form element, which exposes the onSubmit event.
     return (
         <form
-            onSubmit={(ev) => {
-                // IMPORTANT: Prevent the onSubmit event from reloading the page!
-                ev.preventDefault();
-                // Do not submit if there is an error! Use form.validate to validate when validateOnChange is disabled.
-                if (form.error) return;
-                // form.values contains the modified values, form.defaultValues contains the initial values
+            onSubmit={form.handleSubmit(() => {
+                // The form.handleSubmit validates the form before calling your callback
+                // Do your submit logic here...
                 console.log("submit", form.values);
-            }}
+            })}
         >
-            <button>Submit!</button>
+            {/* Make sure to add type="submit" */}
+            <button type="submit">Submit!</button>
         </form>
     );
 }
 ```
 
-You can also just use a `<button>` and submitting in the button's `onClick` handler, but this event does not fire when pressing enter in a text input!
+`form.handleSubmit()` just returns a helper function that wraps `ev.preventDefault()`, `form.validate()` and `form.setState()`.
 
 ### Creating inputs
 
-This library is build upon the fact that only the things that change should rerender (~refresh), for example: when the _name_ field changes, only the inputs that use _name_ field will rerender.
+This library is build upon the fact that only the things that change should rerender (~refresh), for example: when the _name_ field changes, only the inputs that use the _name_ field will rerender.
 
 The built-in form elements ([`FormInput`](/docs/FormInput), [`FormSelect`](/docs/FormSelect) ...) implement this by listening for changes only on their specified field. You can also use multiple inputs on the same field (they will the synchronized) and listen for changes on a field by using the [`useListener`](/docs/useListener) hook or [`Listener`](/docs/Listener) component.
 
@@ -87,25 +86,19 @@ function MyForm() {
     const form = useForm({ email: "", password: "" });
     return (
         <form
-            onSubmit={async (ev) => {
-                ev.preventDefault();
-                if (form.error) return;
-
-                // Notify every input that the form is submitting. This will disable them.
-                form.setState({ isSubmitting: true });
+            onSubmit={form.handleSubmit(async (ev) => {
+                // Implement your submit logic here...
+                console.log("submitting", form.values);
                 // Fake fetch, by waiting for 500ms
-                console.log("submit", form.values);
                 await new Promise((res) => setTimeout(res, 500));
-                // Notify every input that the form is not submitting anymore.
-                form.setState({ isSubmitting: false });
-                // Set new default values if needed
+                // Optional: set new default values
                 form.setDefaultValues(form.values);
-            }}
+            })}
         >
             {/* Make sure to pass the form prop! */}
             <FormInput form={form} name="email" type="text" />
             <FormInput form={form} name="password" type="password" />
-            <button>Submit!</button>
+            <button type="submit">Submit!</button>
         </form>
     );
 }

package.json

@@ -18,7 +18,7 @@
     "react-markdown": "^5.0.3",
     "react-syntax-highlighter": "^15.4.3",
     "styled-components": "^5.2.1",
-    "typed-react-form": "^1.2.10"
+    "typed-react-form": "^1.2.11"
   },
   "devDependencies": {
     "@types/node": "^14.14.34",

pages/docs/[doc].tsx

@@ -36,6 +36,10 @@ const ReactMarkdownContainer = styled.div`
     overflow: hidden;
     margin-bottom: 30em;
 
+    pre {
+        border-radius: 0.3em;
+    }
+
     code {
         font-size: 1.3em;
     }
@@ -66,15 +70,21 @@ const ReactMarkdownContainer = styled.div`
         margin: 1.2em 0 0.5em 0;
     }
 
-    /* h1,
+    h1,
     h2 {
+        /* color: #004; */
         padding-bottom: 0.2em;
         border-bottom: 1px solid #0002;
-    } */
+    }
 
     p {
         color: #333;
     }
+
+    li {
+        margin-top: 0.2em;
+        margin-bottom: 0.2em;
+    }
 `;
 
 const SidebarHolder = styled.div`
@@ -102,7 +112,10 @@ export default function DocPage(props: Props) {
         <main onClick={() => setShowMobileMenu(false)}>
             <Head>
                 <link rel="preconnect" href="https://fonts.gstatic.com" />
-                <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap" rel="stylesheet" />
+                <link
+                    href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap"
+                    rel="stylesheet"
+                />
             </Head>
             <NavBar onMenu={() => setShowMobileMenu(true)} />
             <CenterContainer style={{ margin: "0 0.5em" }}>
@@ -121,9 +134,16 @@ export default function DocPage(props: Props) {
                                     );
                                 },
                                 code: ({ language, value }) => {
-                                    return <SyntaxHighlighter style={materialOceanic} language={language} children={value} />;
+                                    return (
+                                        <SyntaxHighlighter
+                                            style={materialOceanic}
+                                            language={language}
+                                            children={value}
+                                        />
+                                    );
                                 },
-                            }}>
+                            }}
+                        >
                             {props.content}
                         </ReactMarkdown>
                     </ReactMarkdownContainer>

pages/docs/test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { AnyListener, FormInput, useForm } from "typed-react-form";
+
+function MyForm() {
+    const form = useForm({ email: "" });
+    // Use the standard html form element, which exposes the onSubmit event.
+    return (
+        <form
+            onSubmit={form.handleSubmit(() => {
+                // The form.handleSubmit validates the form before calling your callback
+                console.log("submit", form.values);
+            })}
+        >
+            {/* Make sure to add type="submit" */}
+            <button type="submit">Submit!</button>
+        </form>
+    );
+}
+
+function MyForm2() {
+    const form = useForm({ email: "", password: "" });
+    return (
+        <form
+            onSubmit={form.handleSubmit(async (ev) => {
+                // Implement your submit logic here...
+                console.log("submitting", form.values);
+                // Fake fetch, by waiting for 500ms
+                await new Promise((res) => setTimeout(res, 500));
+                // Optional: set new default values
+                form.setDefaultValues(form.values);
+            })}
+        >
+            {/* Make sure to pass the form prop! */}
+            <FormInput form={form} name="email" type="text" />
+            <FormInput form={form} name="password" type="password" />
+            <button type="submit">Submit!</button>
+        </form>
+    );
+}
+
+export default function Testing() {
+    return (
+        <>
+            <MyForm />
+            <hr />
+            <MyForm2 />
+        </>
+    );
+}

yarn.lock

@@ -2106,10 +2106,10 @@ type-fest@^0.7.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
   integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
 
-typed-react-form@^1.2.10:
-  version "1.2.10"
-  resolved "https://registry.yarnpkg.com/typed-react-form/-/typed-react-form-1.2.10.tgz#e43844284023b3a5b36253c8b9e6f4697e8a7436"
-  integrity sha512-4eW/kdSSlfovsaIyUvt6nsML1BREEKYruGfaA8m2/jr/+zm4CQLHbLXx+6YT/M/ZEs3XvomkJxIG0fFN4VkK3g==
+typed-react-form@^1.2.11:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/typed-react-form/-/typed-react-form-1.2.11.tgz#bf0ad996df8d2344193dfb323d1087cd5a3e2bd7"
+  integrity sha512-yxDt4KsHC4tVTbeshtuwLFiFE1k/BnHL8m0pMpbTKnifA/G98Dl82ui1UxzgZSgOYNYhnFdGxJXE9SmN+dttfA==
 
 typescript@^4.2.3:
   version "4.2.3"