testing

test/test.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 
-import { useForm, HTMLInputExtractor } from '../'
+import { useForm } from '../'
 
 
 const TextError: React.FC<{ error?: string }> = ({ error }) => !error
@@ -10,7 +10,7 @@ const TextError: React.FC<{ error?: string }> = ({ error }) => !error
 
 const Index: React.FC = () => {
 
-	const { auto, form, update, errors } = useForm({
+  const { auto, form, errors } = useForm({
     username: '',
     password: '',
     type: 'formhero',
@@ -22,18 +22,19 @@ const Index: React.FC = () => {
       message: 'To short',
     },
     awesome: (value) => !!value
-	}, { extractor: HTMLInputExtractor })
+  })
 
-	const _submit = (e: React.MouseEvent) => {
+  const _submit = (e: React.FormEvent) => {
     e.preventDefault()
     console.log(form, errors)
   }
 
   return (
     <div>
-			<form>
+      <form onSubmit={_submit}>
         <div>Username</div>
         <input {...auto('username')} />
+        {errors.username && 'Something went wrong'}
         <TextError error={errors.username} />
         <br />
 
@@ -52,11 +53,15 @@ const Index: React.FC = () => {
         <br />
 
         <div>Is it awesome?</div>
-				<input type="checkbox" name="vehicle" {...auto('awesome', { setter: 'checked', extractor: (e) => e.target.checked })} />
+        <input type="checkbox" name="vehicle" {...auto('awesome', {
+          setter: 'checked',
+          getter: 'onChange',
+          extractor: (e) => e.target.checked
+        })} />
         <TextError error={errors.awesome} />
         <br />
 
-				<button onClick={_submit}>Test</button>
+        <button type="submit">Go 🚀</button>
       </form>
     </div>
   )