formal-react-forms - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
   "name": "formal-react-forms",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "The most sophisticated form state wrapper for React",
@@ -5,0 +5,0 @@ "author": "bmullis",

README.md

@@ -5,4 +5,8 @@ # Formal 🤵🏼
 
+Note: Decided to use Yup for form validation. An example of usage is below and you can learn more about Yup here: https://github.com/jquense/yup
+
 ## Getting Started
 
+#
+
 ### Installing
@@ -12,120 +16,157 @@
 
-OR
+or
 
 `yarn add formal-react-forms`
 
-### Usage Example
+#
 
-#### Import
+## Example Usage
 
+### Imports
+
+```js
+import Formal, {
+  generateError,
+  FormalProps,
+  FormalActionsProps,
+} from "formal-react-forms";
+import * as Yup from "yup";
 ```
-import Formal from "formal-react-forms";
+
+### Create a Validation Schema with Yup
+
+```js
+const validationSchema = Yup.object().shape({
+  firstName: Yup.string().required("First name is required"),
+  lastName: Yup.string(),
+  email: Yup.string()
+    .email("Please provide a valid email address")
+    .required("Email is requried"),
+  password: Yup.string()
+    .min(8, "Passwords must be between 8 and 50 characters")
+    .max(50, "Passwords must be between 8 and 50 characters")
+    .required("Password is required"),
+  confirmPassword: Yup.string()
+    .min(8, "Passwords must be between 8 and 50 characters")
+    .max(50, "Passwords must be between 8 and 50 characters")
+    .required("Please confirm your password"),
+});
 ```
 
-#### Example Usage
+### Setup You Initial Values
 
 ```js
+const initialValues = {
+  firstName: "",
+  lastName: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+};
+```
+
+### Create the Function to Call After Form Submit
+
+```js
+const onSubmit = (actions: FormalActionsProps, values: InitialValuesProps) => {
+  // Make Axios (or equivalent) call
+  // You have access to :
+  // an object with the values from the form
+  values: actions: {
+    setIsSubmitting, // set state action to update isSubmitting state
+      setErrors; // set state action to update form errors
+  }
+  // Examples:
+  // actions.setErrors([newError]);
+  // actions.setIsSubmitting(false);
+
+  // Convert server returned errors to Yup errors with:
+  const newError = generateError({
+    message: "The passwords do not match",
+    path: "confirmPassword",
+  });
+};
+```
+
+### Example JSX form
+
+```js
 <Formal
   isInitiallyValid={true}
-  initialValues={{
-    firstName: "",
-    lastName: "",
-    email: "",
-    password: "",
-    confirmPassword: "",
-  }}
-  validationSchema={[
-    { field: "firstName", required: true },
-    { field: "lastName", required: false },
-    { field: "email", required: true },
-    { field: "password", required: true },
-    { field: "confirmPassword", required: true },
-  ]}
-  onSubmit={(
-    actions: { setIsSubmitting: Function, setErrors: Function },
-    values: {
-      firstName: string,
-      lastName: string,
-      email: string,
-      password: string,
-      confirmPassword: string,
-    }
-  ) => onSubmit(actions, values)}
+  validationSchema={validationSchema}
+  initialValues={initialValues}
+  onSubmit={(actions, values) => onSubmit(actions, values)}
 >
-  {({
-    isValid,
-    errors,
-    values,
-    handleFormSubmit,
-    onChangeValues,
-    isSubmitting,
-  }: any) => {
+  {({ isValid, errors, values, onChangeValues, isSubmitting }: FormalProps) => {
     return (
-      <>
-        <div>
-          <input
-            type="text"
-            value={values.firstName}
-            placeholder="First Name"
-            onChange={({ target: { value } }) => {
-              onChangeValues({ firstName: value });
-            }}
-          />
-          {getError({ field: "firstName", errors })}
-        </div>
+      <div>
+        <input
+          type="text"
+          value={values.firstName}
+          placeholder="First Name"
+          onChange={({ target: { value } }) => {
+            onChangeValues({ firstName: value });
+          }}
+        />
+        // See example function below
+        {getError({ field: "firstName", errors })}
+      </div>
 
-        <div>
-          <input
-            type="text"
-            value={values.lastName}
-            placeholder="Last Name"
-            onChange={({ target: { value } }) => {
-              onChangeValues({ lastName: value });
-            }}
-          />
-          {getError({ field: "lastName", errors })}
-        </div>
+      <div>
+        <input
+          type="text"
+          value={values.lastName}
+          placeholder="Last Name"
+          onChange={({ target: { value } }) => {
+            onChangeValues({ lastName: value });
+          }}
+        />
+        // See example function below
+        {getError({ field: "lastName", errors })}
+      </div>
 
-        <div>
-          <input
-            type="email"
-            value={values.email}
-            placeholder="Email Address"
-            onChange={({ target: { value } }) => {
-              onChangeValues({ email: value });
-            }}
-          />
-          {getError({ field: "email", errors })}
-        </div>
+      <div>
+        <input
+          type="email"
+          value={values.email}
+          placeholder="Email Address"
+          onChange={({ target: { value } }) => {
+            onChangeValues({ email: value });
+          }}
+        />
+        // See example function below
+        {getError({ field: "email", errors })}
+      </div>
 
-        <div>
-          <input
-            type="password"
-            placeholder="Password"
-            value={values.password}
-            onChange={({ target: { value } }) =>
-              onChangeValues({ password: value })
-            }
-          />
-          {getError({ field: "password", errors })}
-        </div>
+      <div>
+        <input
+          type="password"
+          placeholder="Password"
+          value={values.password}
+          onChange={({ target: { value } }) =>
+            onChangeValues({ password: value })
+          }
+        />
+        // See example function below
+        {getError({ field: "password", errors })}
+      </div>
 
-        <div>
-          <input
-            type="password"
-            placeholder="Confirm Password"
-            value={values.confirmPassword}
-            onChange={({ target: { value } }) =>
-              onChangeValues({ confirmPassword: value })
-            }
-          />
-          {getError({ field: "confirmPassword", errors })}
-        </div>
+      <div>
+        <input
+          type="password"
+          placeholder="Confirm Password"
+          value={values.confirmPassword}
+          onChange={({ target: { value } }) =>
+            onChangeValues({ confirmPassword: value })
+          }
+        />
+        // See example function below
+        {getError({ field: "confirmPassword", errors })}
+      </div>
 
-        <div>
-          <button type="submit" onClick={handleFormSubmit} disabled={!isValid}>
-            {isSubmitting ? "Loading..." : "Submit"}
-          </button>
-        </div>
-      </>
+      <div>
+        <button type="submit" disabled={!isValid}>
+          {isSubmitting ? "Loading..." : "Submit"}
+        </button>
+      </div>
     );
@@ -136,2 +177,19 @@ }}
 
+### Example Error Extractor Function
+
+```js
+const getError = ({
+  field,
+  errors,
+}: {
+  field: string,
+  errors: Yup.ValidationError[],
+}) => {
+  const error = errors.find((error) => error.path === field);
+  return error ? <span>{error.message}</span> : null;
+};
+```
+
+#
+
 ## Authors
@@ -138,0 +196,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16315

increased by10.22%

Number of lines in readme file

199

increased by41.13%

No dependency changes