testing

test/test.tsx

@@ -1,65 +1,70 @@
-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
-	? null
+  ? null
-	: <div className="has-text-danger">{error}</div>
+  : <div className="has-text-danger">{error}</div>
 
 const Index: React.FC = () => {
 
-	const { auto, form, update, errors } = useForm({
+  const { auto, form, errors } = useForm({
-		username: '',
+    username: '',
-		password: '',
+    password: '',
-		type: 'formhero',
+    type: 'formhero',
-		awesome: true,
+    awesome: true,
-	}, {
+  }, {
-		username: /^test/,
+    username: /^test/,
-		password: {
+    password: {
-			validator: /^.{3,}$/,
+      validator: /^.{3,}$/,
-			message: 'To short',
+      message: 'To short',
-		},
+    },
-		awesome: (value) => !!value
+    awesome: (value) => !!value
-	}, { extractor: HTMLInputExtractor })
+  })
 
-	const _submit = (e: React.MouseEvent) => {
+  const _submit = (e: React.FormEvent) => {
-		e.preventDefault()
+    e.preventDefault()
-		console.log(form, errors)
+    console.log(form, errors)
-	}
+  }
 
-	return (
+  return (
-		<div>
+    <div>
-			<form>
+      <form onSubmit={_submit}>
-				<div>Username</div>
+        <div>Username</div>
-				<input {...auto('username')} />
+        <input {...auto('username')} />
-				<TextError error={errors.username} />
+        {errors.username && 'Something went wrong'}
-				<br />
+        <TextError error={errors.username} />
+        <br />
 
-				<div>Password</div>
+        <div>Password</div>
-				<input {...auto('password')} />
+        <input {...auto('password')} />
-				<TextError error={errors.password} />
+        <TextError error={errors.password} />
-				<br />
+        <br />
 
-				<div>Which one to choose?</div>
+        <div>Which one to choose?</div>
-				<select {...auto('type')}>
+        <select {...auto('type')}>
-					<option value="redux-form">Redux-Form</option>
+          <option value="redux-form">Redux-Form</option>
-					<option value="react-hook-forms">React-Hook-Forms</option>
+          <option value="react-hook-forms">React-Hook-Forms</option>
-					<option value="formik">Formik</option>
+          <option value="formik">Formik</option>
-					<option value="formhero">FormHero</option>
+          <option value="formhero">FormHero</option>
-				</select>
+        </select>
-				<br />
+        <br />
 
-				<div>Is it awesome?</div>
+        <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', {
-				<TextError error={errors.awesome} />
+          setter: 'checked',
-				<br />
+          getter: 'onChange',
+          extractor: (e) => e.target.checked
+        })} />
+        <TextError error={errors.awesome} />
+        <br />
 
-				<button onClick={_submit}>Test</button>
+        <button type="submit">Go 🚀</button>
-			</form>
+      </form>
-		</div>
+    </div>
-	)
+  )
 }
 
 ReactDOM.render(<Index />, document.getElementById('root'))