fix(hooks): usage of useForm

example/index.tsx

@@ -1,65 +1,38 @@
-import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { Form, HandleForm } from 'react-component-form'
+import React from 'react'
+import { Form, useForm } from 'react-component-form'
+import type { HandleUseFormCallback } from 'react-component-form'
 
-import './index.css'
-import GitHubLogo from 'url:./github.jpg'
-
-const App: React.FC = () => {
-  const handleSubmit: HandleForm = (formData, formElement) => {
-    console.clear()
-    console.log('onSubmit: ', formData)
-    formElement.reset()
+const schema = {
+  inputName: {
+    type: 'string',
+    minLength: 3,
+    maxLength: 20
   }
+}
 
-  const handleChange: HandleForm = (formData) => {
-    console.log('onChange: ', formData)
+export const Example = () => {
+  const { errors, handleUseForm } = useForm(schema)
+
+  const onSubmit: HandleUseFormCallback<typeof schema> = (
+    formData,
+    formElement
+  ) => {
+    console.log(formData) // { inputName: 'value of the input validated' }
+    formElement.reset()
+    return null
   }
 
   return (
-    <div className='container'>
-      <h2>{'<Form />'}</h2>
-      <h5 className='title-install'>npm install --save react-component-form</h5>
+    <Form onSubmit={handleUseForm(onSubmit)}>
+      <input type='text' name='inputName' />
+      {errors.inputName != null && <p>{errors.inputName[0].message}</p>}
 
-      <Form onSubmit={handleSubmit} onChange={handleChange}>
-        <div className='form-group'>
-          <label htmlFor='name'>Name :</label>
-          <input
-            className='form-control'
-            type='text'
-            name='name'
-            id='name'
-            placeholder='name'
-          />
-        </div>
-
-        <button type='submit' className='btn btn-primary'>
-          Submit
-        </button>
-      </Form>
-
-      <div className='result-container'>
-        <h4>
-          Try the form and Inspect the console{' '}
-          <span role='img' aria-label='smiley'>
-            😃
-          </span>
-        </h4>
-      </div>
-
-      <div className='github-logo'>
-        <a
-          target='_blank'
-          rel='noopener noreferrer'
-          href='https://github.com/Divlo/react-component-form'
-        >
-          <img width='30px' alt='github' src={GitHubLogo} />
-        </a>
-      </div>
-    </div>
+      <button type='submit'>Submit</button>
+    </Form>
   )
 }
 
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container)
-root.render(<App />)
+root.render(<Example />)

example/package-lock.json

@@ -15,6 +15,7 @@
         "@types/react": "18.0.17",
         "@types/react-dom": "18.0.6",
         "parcel": "2.7.0",
+        "process": "^0.11.10",
         "typescript": "4.7.4"
       }
     },
@@ -2505,6 +2506,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/react": {
       "resolved": "../node_modules/react",
       "link": true
@@ -4350,6 +4360,12 @@
         "is-json": "^2.0.1"
       }
     },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true
+    },
     "react": {
       "version": "file:../node_modules/react",
       "requires": {

example/package.json

@@ -8,14 +8,15 @@
   },
   "dependencies": {
     "react": "file:../node_modules/react",
-    "react-dom": "file:../node_modules/react-dom",
-    "react-component-form": "file:.."
+    "react-component-form": "file:..",
+    "react-dom": "file:../node_modules/react-dom"
   },
   "devDependencies": {
     "@parcel/transformer-image": "2.7.0",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
     "parcel": "2.7.0",
+    "process": "^0.11.10",
     "typescript": "4.7.4"
   }
 }