React Form - Overview
React Form is a UI agnostic form abstraction for React. It was built out of the
frustration of having to manage attribute and error state using useState
. It
is built to be a low level form library, so you can build your own form inputs
that integrate with your design system. This makes building forms with React
look consistent and promotes roper abstraction of application logic.
Form inputs can be built using render a prop that receive props
and error
.
The props can be spread on to an input, giving you full access to the native
elements for full customizability.
import { InputGroup } from "@adeattwood/react-form";const Input = ({ attribute, label }) => (<InputGroup attribute={attribute}>{({ props, error }) => (<div><label htmlFor={props.id}>{label}</label><input {...props} />{error && <p>{error}</p>}</div>)}</InputGroup>);
Then to use your input you can wrap then in the Form
component that will use
a context to manage all of the for logic for you. Once the form is submitted
the onSubmit
function will be called with the current state of the form.
import { Form } from "@adeattwood/react-form";<ForminitialValues={{ username: "" }}onSubmit={({ formState }) => console.log(formState.username)}><Input label="Username" attribute="username"<button>Submit</button></Form>