Update README.md

README.md

@@ -52,67 +52,86 @@ const Form = () => {
 }
 ```
 
-## 🔥 Avanced Example
+## 🔥 Examples
+
+### Validation
 
 ```typescript
-import ReactDOM from 'react-dom'
-import { useForm } from 'formhero'
-
 const Form = () => {
 
-  const { auto, form, errors } = useForm({
+	const { auto, form, errors } = useForm({
-    username: '',
+		username: '',
-    password: '',
+		email: '',
-    type: 'formhero',
+		password: ''
-    awesome: true,
+	}, {
-  }, {
+		username: value => value.length > 3,
-    username: /^test/,
+		email: {
-    password: {
+			validator: /@/,
-      validator: /^.{3,}$/,
+			message: 'Must contain an @',
-      message: 'To short',
+		},
-    },
+		password: [
-    awesome: (value) => !!value
+			{
-  })
+				validator: /[A-Z]/,
+				message: 'Must contain an uppercase letter'
+			},
+			{
+				validator: /[\d]/,
+				message: 'Must contain a digit'
+			},
+		]
+	})
 
-  const _submit = (e: React.FormEvent) => {
+	return (
-    e.preventDefault()
+		<form>
-    console.log(form, errors)
-  }
 
-  return (
+			<h1>Errors & Validation</h1>
-    <div>
-      <form onSubmit={_submit}>
 
-        <div>Username</div>
+			<input {...auto('username')} placeholder="Username" />
-        <input {...auto('username')} />
+			{errors.username && 'Must be longer than 3'}
-        {errors.username && 'Something went wrong'}
-        <br />
 
-        <div>Password</div>
+			<input {...auto('email')} placeholder="EMail" />
-        <input {...auto('password')} />
+			{errors.email}
-        <br />
 
-        <div>Which one to choose?</div>
+			<input {...auto('password')} placeholder="Password" type="password" />
-        <select {...auto('type')}>
+			{errors.password}
-          <option value="redux-form">Redux-Form</option>
-          <option value="react-hook-forms">React-Hook-Forms</option>
-          <option value="formik">Formik</option>
-          <option value="formhero">FormHero</option>
-        </select>
-        <br />
 
-        <div>Is it awesome?</div>
+		</form>
-        <input type="checkbox" {...auto('awesome', {
+	)
-          setter: 'checked',
+}
-          getter: 'onChange',
+```
-          extractor: (e) => e.target.checked
-        })} />
-        <br />
 
-        <button type="submit">Go 🚀</button>
+### Easy Customization
-      </form>
+
-    </div>
+Often it happens that you use a specific input or framework, so the default getter, setter and extractor for the event won't cut it. No worries: formhero got you covered!
-  )
+
+```typescript
+const Form = () => {
+
+	const { auto, form, errors } = useForm({
+		awesome: true,
+	})
+
+	return (
+		<form onSubmit={e => {
+			e.preventDefault()
+			console.log(form)
+		}}>
+
+			<h1>Custom</h1>
+
+			<label>
+				<input type="checkbox" {...auto('awesome', {
+					setter: 'checked',
+					getter: 'onChange',
+					extractor: (e) => e.target.checked
+				})} />
+				Is it awesome?
+        	</label>
+
+			<input type="submit" />
+
+		</form>
+	)
 }
 ```