Update README.md

README.md

@@ -52,66 +52,85 @@ const Form = () => {
 }
 ```
 
-## 🔥 Avanced Example
+## 🔥 Examples
+
+### Validation
 
 ```typescript
-import ReactDOM from 'react-dom'
-import { useForm } from 'formhero'
-
 const Form = () => {
 
 	const { auto, form, errors } = useForm({
 		username: '',
-    password: '',
+		email: '',
-    type: 'formhero',
+		password: ''
-    awesome: true,
 	}, {
-    username: /^test/,
+		username: value => value.length > 3,
-    password: {
+		email: {
-      validator: /^.{3,}$/,
+			validator: /@/,
-      message: 'To short',
+			message: 'Must contain an @',
 		},
-    awesome: (value) => !!value
+		password: [
+			{
+				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)
+
+			<h1>Errors & Validation</h1>
+
+			<input {...auto('username')} placeholder="Username" />
+			{errors.username && 'Must be longer than 3'}
+
+			<input {...auto('email')} placeholder="EMail" />
+			{errors.email}
+
+			<input {...auto('password')} placeholder="Password" type="password" />
+			{errors.password}
+
+		</form>
+	)
 }
+```
+
+### Easy Customization
+
+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 (
-    <div>
+		<form onSubmit={e => {
-      <form onSubmit={_submit}>
+			e.preventDefault()
+			console.log(form)
+		}}>
 
-        <div>Username</div>
+			<h1>Custom</h1>
-        <input {...auto('username')} />
-        {errors.username && 'Something went wrong'}
-        <br />
 
-        <div>Password</div>
+			<label>
-        <input {...auto('password')} />
-        <br />
-
-        <div>Which one to choose?</div>
-        <select {...auto('type')}>
-          <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>
 				<input type="checkbox" {...auto('awesome', {
 					setter: 'checked',
 					getter: 'onChange',
 					extractor: (e) => e.target.checked
 				})} />
-        <br />
+				Is it awesome?
+        	</label>
+
+			<input type="submit" />
 
-        <button type="submit">Go 🚀</button>
 		</form>
-    </div>
 	)
 }
 ```