diff --git a/README.md b/README.md index 8b299d1..05f6527 100644 --- a/README.md +++ b/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({ - username: '', - password: '', - type: 'formhero', - awesome: true, - }, { - username: /^test/, - password: { - validator: /^.{3,}$/, - message: 'To short', - }, - awesome: (value) => !!value - }) + const { auto, form, errors } = useForm({ + username: '', + email: '', + password: '' + }, { + username: value => value.length > 3, + email: { + validator: /@/, + message: 'Must contain an @', + }, + password: [ + { + validator: /[A-Z]/, + message: 'Must contain an uppercase letter' + }, + { + validator: /[\d]/, + message: 'Must contain a digit' + }, + ] + }) - const _submit = (e: React.FormEvent) => { - e.preventDefault() - console.log(form, errors) - } + return ( +
- return ( -
- - -
Username
- - {errors.username && 'Something went wrong'} -
+

Errors & Validation

-
Password
- -
+ + {errors.username && 'Must be longer than 3'} -
Which one to choose?
- -
+ + {errors.email} -
Is it awesome?
- e.target.checked - })} /> -
+ + {errors.password} - - -
- ) + + ) +} +``` + +### 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 ( +
{ + e.preventDefault() + console.log(form) + }}> + +

Custom

+ + + + + +
+ ) } ```