cupcakearmy/formhero
1
0
Fork 0
mirror of https://github.com/cupcakearmy/formhero.git synced 2024-12-23 00:26:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Nicco 2019-09-28 19:16:45 +02:00 committed by GitHub
parent 14e6f3d3c7
commit e3398b8571
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
README.md
View File

@ -59,44 +59,44 @@ const Form = () => {
```typescript ```typescript
const Form = () => { const Form = () => {
const { auto, form, errors } = useForm({ const { auto, form, errors } = useForm({
username: '', username: '',
email: '', email: '',
password: '' password: ''
}, { }, {
username: value => value.length > 3, username: value => value.length > 3,
email: { email: {
validator: /@/, validator: /@/,
message: 'Must contain an @', message: 'Must contain an @',
}, },
password: [ password: [
{ {
validator: /[A-Z]/, validator: /[A-Z]/,
message: 'Must contain an uppercase letter' message: 'Must contain an uppercase letter'
}, },
{ {
validator: /[\d]/, validator: /[\d]/,
message: 'Must contain a digit' message: 'Must contain a digit'
}, },
] ]
}) })
return ( return (
<form> <form>
<h1>Errors & Validation</h1> <h1>Errors & Validation</h1>
<input {...auto('username')} placeholder="Username" /> <input {...auto('username')} placeholder="Username" />
{errors.username && 'Must be longer than 3'} {errors.username && 'Must be longer than 3'}
<input {...auto('email')} placeholder="EMail" /> <input {...auto('email')} placeholder="EMail" />
{errors.email} {errors.email}
<input {...auto('password')} placeholder="Password" type="password" /> <input {...auto('password')} placeholder="Password" type="password" />
{errors.password} {errors.password}
</form> </form>
) )
} }
``` ```
@ -107,31 +107,31 @@ Often it happens that you use a specific input or framework, so the default gett
```typescript ```typescript
const Form = () => { const Form = () => {
const { auto, form, errors } = useForm({ const { auto, form, errors } = useForm({
awesome: true, awesome: true,
}) })
return ( return (
<form onSubmit={e => { <form onSubmit={e => {
e.preventDefault() e.preventDefault()
console.log(form) console.log(form)
}}> }}>
<h1>Custom</h1> <h1>Custom</h1>
<label> <label>
<input type="checkbox" {...auto('awesome', { <input type="checkbox" {...auto('awesome', {
setter: 'checked', setter: 'checked',
getter: 'onChange', getter: 'onChange',
extractor: (e) => e.target.checked extractor: (e) => e.target.checked
})} /> })} />
Is it awesome? Is it awesome?
</label> </label>
<input type="submit" /> <input type="submit" />
</form> </form>
) )
} }
``` ```