Updated readme

README.md

@@ -7,20 +7,73 @@
 ## Install
 
 ```bash
-npm install --save @colorfy-software/use-form
+yarn add @colorfy-software/use-form
 ```
 
 ## Usage
 
 ```tsx
-import * as React from "react";
+import * as React from 'react'
+import useForm, { hasLengthyError, hasEmailError, FormValidatorType } from '@colorfy-software/use-form'
 
-import { useMyHook } from "@colorfy-software/use-form";
+// Define the form fields
+const FORM_SCHEMA = {
+  email: '',
+  password: '',
+}
+
+// Define the form validators
+// Validators should return either false or the error
+// this allows for error chaining
+const FORM_VALIDATION: FormValidatorType<typeof FORM_SCHEMA> = {
+  email: {
+    validatorFn: (value) => hasLengthyError(value) || hasEmailError(value),
+  },
+  password: {
+    validatorFn: (value) => hasLengthyError(value),
+  },
+}
 
 const Example = () => {
-  const example = useMyHook();
-  return <div>{example}</div>;
-};
+  // Submit function that will be called when the form is submitted
+  const onSubmitForm = async (form: typeof FORM_SCHEMA) => {
+    console.log('onSubmitForm', {
+      email: form.email,
+      password: form.password,
+    })
+  }
+
+  const { state, onHandleChange, onHandleSubmit, errors } = useForm(FORM_SCHEMA, FORM_VALIDATION, onSubmitForm)
+
+  return (
+    <div>
+      <h1>useForm</h1>
+      {/*  Show errors if error exists */}
+      {errors.email && <p>{errors.email}</p>}
+      <input
+        type="email"
+        name="email"
+        placeholder="email"
+        {/* Pass the value from the hook to the input */}
+        value={state.email}
+        {/* Update hook state when input changes */}
+        onChange={(e) => onHandleChange('email', e.target.value)}
+      />
+
+      {errors.password && <p>{errors.password}</p>}
+      <input
+        type="password"
+        name="password"
+        placeholder="password"
+        value={state.password}
+        onChange={(e) => onHandleChange('password', e.target.value)}
+      />
+
+      {/* Call the submit function when the form is submitted. This handles validation and error chaining */}
+      <button onClick={onHandleSubmit}>Submit</button>
+    </div>
+  )
+}
 ```
 
 ## License