author: Aral Roca [email protected]
Less than 1kb library to do the forms much simpler without state. Do you have all the fields inside the onSubmit function. Also you don't need to preventDefault and trim string fields, you can directly start working with fields.
npm install react-form-uncontrolled --save
The last version is using React hooks (experimental in React 16.7) under the hood, because functional components minify much better than classes. If you want compatibility with React 16.6 you can use [email protected]
version
import { Form } from 'react-form-uncontrolled'
function SignIn(props){
return (
<Form onSubmit={props.onSignIn}>
<label htmlFor="username">
<div>Username</div>
<input
type="text"
required
id="username"
name="username"
placeholder="Write here the username"
/>
</label>
<label htmlFor="password">
<div>Password</div>
<input
type="password"
required
id="password"
name="password"
placeholder="Write here the password"
/>
</label>
<button type="submit">
Sign In
</button>
</Form>
)
}
or:
import { Form, Input } from 'react-form-uncontrolled'
function SignIn(props){
return (
<Form onSubmit={props.onSignIn}>
<Input
label="Username"
name="username"
type="text"
required
placeholder="Write here the username"
/>
<Input
label="Password"
name="password"
type="password"
required
placeholder="Write here the password"
/>
<button type="submit">
Sign In
</button>
</Form>
)
}
And props.SignIn is fired on submitting the form and receive an object with:
onSignIn({ username, password }) {
// ...
}