Caution
@shopify/react-form-state
is deprecated.
Shopifolk, see Shopify/quilt-internal for information on the latest packages available for use internally.
Manage React forms tersely and type-safely with no magic.
This library is now superseded by @shopify/react-form as it allows you to write the preferred, functional, and hooks-driven React components over class-based ones.
yarn add @shopify/react-form-state
The default component exported by this library is <FormState />
.
import FormState from '@shopify/react-form-state';
// Fields here refers to the inferred type of your initialValues object
interface Props<Fields> {
initialValues: Fields;
validators?: Partial<ValidatorDictionary<Fields>>;
onSubmit?: SubmitHandler<Fields>;
validateOnSubmit?: boolean;
children(form: FormDetails<Fields>): React.ReactNode;
}
Its only mandatory props are initialValues
and children
. The initialValues
prop is used to infer all the types for the rest of the component, and to generate handlers and field state objects. The children
prop expects a function of the current state of the form, which is represented by a FormDetails
object.
<FormState initialValues={myInitialValues}>
{({fields, dirty, valid, submitting, errors, reset, submit}) => {
return /* some cool ui */;
}}
</FormState>
For detailed explanations of how to use <FormState />
check out the guide.
The library also makes a number of validation factory functions available out of the box that should help with common use cases, as well as some tools to make building reusable custom validators easy.
import {validate, validators} from '@shopify/react-form-state';
For detailed explanations of the validation utilities, check out the validation docs.