⚛️ 💼 React Form
React hooks for managing form state and lifecycle
Intro
React Form is currently in alpha! This means:
- The existing API is not stable. Expect major changes/additions as minor and patch releases while use-cases evolve.
- It is not recommended for mission critical production code.
Table of Contents
Installation
$ yarn add react-form # or $ npm i react-form --saveQuick Start
This will render a very basic form:
import React from 'react' import { useForm, useField } from 'react-form' // Build an input field const InputField = React.forwardRef(function TextField( { field, ...rest }, ref ) { // Use the useField hook with form props to access form state const { field: { setValue, value, setTouched, error, touched } } = useField(field) // Build your form input return ( <> <input ref={ref} // Use setValue to update form values onChange={e => setValue(e.target.value)} // Use setTouched to update form touch state onBlur={() => setTouched(true)} value={value || ''} {...rest} /> { // Use touched and error state to show errors touched && error ? <em>{error}</em> : null } </> ) }) function MyForm() { // Pass default values (be sure to memoize any options used) const defaultValues = React.useMemo( () => ({ foo: 'hello', bar: { baz: 'world' } }), [] ) // Use the useForm hook to create a form instance const { Form } = useForm({ // Pass the default values defualtValues, // Use a validate function validate: values => ({ foo: !values.foo && 'Foo is required', bar: { baz: !values.bar.baz && 'Baz is required' } }) // Handle form submission onSubmit: values => { console.log('These are the values:', values) } }) return ( // Use the built-in Form component provided by the hook // (or optionally construct your own with the `handleSubmit` function) <Form> <InputField field="foo" /> <InputField field="bar" /> <button type="submit">Submit</button> </Form> ) }Documentation
Complete documentation is coming soon.
Any sparse documentation available in this Readme is being progressively improved as the API evolves.
API
React Charts exposes these top-level exports:
useForm- The primary hook for creating a form.useField- A hook for utilizing form state and lifecycle on the field level.
