Nested useForm() inputs, Self-Rendering useForm(), Yup schemas validation and React-window inputs
The <FormProvider> makes the useForm() context available to nested components. The <ConnectForm> component simplifies access to the form context. It retrieves methods from useFormContext() and passes them as props to its child render function, which uses them to register() input elements with the form.
//The <ConnectForm> children render prop function will receive
//Its {...methods} argument from the parent
const ConnectForm = ({ children }) => {
const methods = useFormContext()
return children({ ...methods })
}
const DeepNest = () => (
<div>
<ConnectForm>
{({ register }) => (
<div>
<input {...register("nested1")} placeholder="Input 1" />
<input {...register("nested2")} placeholder="Input 2" />
</div>
)}
</ConnectForm>
<Primo /> <Secondo />
<div>
)
function Testa(){
const methods = useForm()
return(
<FormProvider {...methods}>
<form>
<DeepNest />
<input type="submit" />
</form>
</FormProvider>
)
}Self-Rendering Form Components
A form composition implements the useForm() hook by leveraging its input function components. It automatically renders and registers complex forms by iterating over the React child elements.
//Basic form passing Input form components and props
function Esempio(){
const onSubmit = (data) => console.log(data);
return (
<>
<h1>Self rendering Form Components</h1>
<Form onSubmit={onSubmit} defaultValues={{
defaultValues: {firstName: "valori" },
criteriaMove: "all"
}}>
<Input name="firstName" inputRules={{required: true}} />
<Input name="lastName" />
<Select name="sex" options={["female", "male"]} />
<button>Submit</button>
</Form>
</>
);
}The parent <Form> component receives the useForm() options and the onSubmit() function as explicit props, while its child elements are implicitly passed via the children prop. We iterate over these child elements, registering only the input components that have a name prop, leaving other child elements unchanged.
//The {function expression} also checks if the children are iterables array
//We include a key prop due to the input being rendered as a list
//We destruct to the child.props to create a destructuble object
function Form({ defaultValues, children, onSubmit }) {
const { handleSubmit, register } = useForm( defaultValues );
return (
<form onSubmit={handleSubmit(onSubmit)}>
{Array.isArray(children)
? children.map((child) => {
return child.props.name
? React.createElement(child.type, {
...{
...child.props,
register,
key: child.props.name
}
})
: child;
})
: children}
</form>
);
}The child's type (its corresponding component function) and its props object are passed to createElement(). The rendered input's configuration props are created by merging the useForm() methods with the child's existing props.
This enables the dynamic rendering of form inputs, each with a specific type, and registered based on its props.
//Specific input components types have their own props
function Input({ register, name, ...rest }) {
return <input {...register(name)} {...rest} />;
}
function Select({ register, options, name, ...rest }) {
return (
<select {...register(name)} {...rest}>
{options.map((value) => (
<option value={value} key={value}>{value}</option>
))}
</select>
);
}Implementing Yup schemas for form validation
React-Hook-Form can integrate external validation libraries, like Yup.
It uses declarative objects, such as validation schemas, to define the valid data structure instead of the inline validation rules. We use the useForm({}) resolver option to integrate the Yup validation.
//The strings are the input fomrState error message
npm install yup
import * as yup from 'yup';
const validationSchema = yup.object({
firstName: yup.string().required("error one"),
lastName: yup.string().required("error two"),
})
function Terzo() {
const resolver = useYupValidationResolver(validationSchema)
const { handleSubmit, register } = useForm({ resolver })
const fatto = (dati) => console.log( dati )
return(
<div className="m-5">
<form onSubmit={handleSubmit(fatto)}>
<input {...register("firstName")} />
<input {...register("lastName")} />
<input type="submit" />
</form>
</div>
)
}The resolver function is typically implemented as a useCallback() function within a custom hook, with the schema as a dependency to prevent unnecessary re-validations.
This function validates the form data against its schema upon submission. If validation succeeds, it returns an object containing the form data and an empty errors object, which then triggers the handleSubmit function. If validation fails, the resolver converts the Yup errors to update the formState.errors object.
//The triggers before the handlesubmit
const useYupValidationResolver = (validationSchema) =>
useCallback(
async (data) => {
try {
const values = await validationSchema.validate(data, {
abortEarly: false,
})
console.log( "Only if no-error", values )
return {
values, errors: {},
}
} catch (errors) {
return {
values: {},
errors: errors.inner.reduce(
(allErrors, currentError) => ({
...allErrors,
[currentError.path]: {
type: currentError.type ?? "validation",
message: currentError.message,
},
}), {}
),
}
}
},
[validationSchema]
)Virtualized useForm() inputs with React-Window
The React-Window library optimizes the rendering of large lists of data through virtualization.
It renders only the items visible within the viewport, minimizing DOM updates. It mantains the complete dataset in a state, like useForm(), independent of visibility.
The react-window <VariableSizeList> component virtualizes the rendering of inputs from a dataset. The viewport size can be set directly or determined automatically using the <AutoSizer> parent component, which provides the available height and width via a render prop.
The <List> component renders each individual item using a child function component, which receives the item's index, a style object for positioning, and the data array passed as itemData, as key props.
//itemCount sets the scroll area based on the size and count of all items.
//The index top style sets the spce between inputs.
import { VariableSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
const WindowedRow = React.memo(({ index, style, data }) => {
const { register } = useFormContext()
const qtyKey = `${index}.quantity`
return (
<div style={{ ...style, color: "red", top: `calc(${style.top + 20}px)` }}>
<label>{data[index].title}</label>
<input {...register(qtyKey)} />
</div>
)
})
<AutoSizer>
{({ height, width }) => (
<List
height={height} width={width}
itemCount={items.length} itemSize={() => 80}
itemData={items}
>
{WindowedRow}
</List>
)}
</AutoSizer>The style prop, specific to each rendered item, can be destructured for further customization and defaults to position: absolute and left: 0.
Inputs registered in the <List> function component are stored independently in the formState. The virtualized mounting and unmounting of these inputs doesn't affect their current data.
//The page content gets displayed as a flex-column and text-center
//The Form container keeps the column display with a align-center for the List
//The List container sets its width and flex-grow-1 to occupy the avaiable space
//We set an array of objects to render as a virtualized list
import { FixedSizeList, VariableSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
const items = Array.from(Array(1000).keys()).map((i) => ({
title: `List ${i}`,
quantity: Math.floor(Math.random() * 10),
}))
const WindowedRow = React.memo(({ index, style, data }) => {...})
function Terzo() {
const formMethods = useForm({ defaultValues: items })
return(
<div className="d-flex flex-column text-center" style={{height: "50vh"}}>
<h1>Using with React-window</h1>
<form className="d-flex flex-column flex-grow-1 align-items-center">
<div className="d-flex flex-grow-1 w-50 py-2">
<FormProvider {...formMethods}>
<AutoSizer>
...
</AutoSizer>
</FormProvider>
</div>
</form>
</div>
)
}Last updated
Was this helpful?