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

styling

Browse Source
This commit is contained in:
cupcakearmy 2019-09-26 23:05:05 +02:00
parent 3d7d754272
commit 9dd2ff3afc
2 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
test/index.html
View File

@ -11,11 +11,6 @@
body { body {
padding: 1em padding: 1em
} }
input,
select {
display: block;
}
</style> </style>
</head> </head>

26
test/test.tsx
View File

@ -33,35 +33,39 @@ const Index: React.FC = () => {
<div> <div>
<form onSubmit={_submit}> <form onSubmit={_submit}>
<div>Username</div> <div>Username</div>
<input {...auto('username')} /> <input className="input" {...auto('username')} />
{errors.username && 'Something went wrong'}
<TextError error={errors.username} /> <TextError error={errors.username} />
<br /> <br /><br />
<div>Password</div> <div>Password</div>
<input {...auto('password')} /> <input className="input" {...auto('password')} />
<TextError error={errors.password} /> <TextError error={errors.password} />
<br /> <br /><br />
<div>Which one to choose?</div> <div>Which one to choose?</div>
<div className="select">
<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 /> </div>
<br /><br />
<div>Is it awesome?</div>
<input type="checkbox" name="vehicle" {...auto('awesome', { <label className="checkbox">
<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?
</label>
<TextError error={errors.awesome} /> <TextError error={errors.awesome} />
<br /> <br /><br />
<button type="submit">Go 🚀</button> <button className="button" type="submit">Go 🚀</button>
</form> </form>
</div> </div>
) )
@ -69,5 +73,5 @@ const Index: React.FC = () => {
ReactDOM.render(<Index />, document.getElementById('root')) ReactDOM.render(<Index />, document.getElementById('root'))
// @ts-ignore // @ts-ignore
// if (module.hot) module.hot.accept() // if (module.hot) module.hot.accept()