useFormValues
A utility hook for reading (and subscribing) to a pience of form data.
const FirstName = () => {
const name = useFormValues("name.first");
return <strong>{name}</strong>;
};
<Form
defaultValue={{
name: { first: "Sally" }
}}
>
<label>
Name
<Form.Field name="name.first" placeholder="First name" />
</label>
<FirstName />
</Form>;
You can also subscribe to multiple paths at once by providing an array of paths.
const Names = () => {
const [first, last] = useFormValues(["firstName", "lastName"]);
return (
<strong>
{first} {last}
</strong>
);
};
<Form
defaultValue={{
firstName: "Sally",
lastName: "Smith"
}}
>
<label>
Name
<Form.Field name="firstName" placeholder="First name" />
</label>
<label>
Surname
<Form.Field name="lastName" placeholder="First name" />
</label>
<Names />
</Form>;
import { useFormValues } from 'react-formal';
#
useFormValues(field: string) => any
Returns the current Field value at the provided path.
Parameters
Return Value
any
#
useFormValues(fields: string[]) => any[]
Returns an array of values for the provided field paths.
Parameters
fieldsstring[]
a set of field paths to observe.
Return Value
any[]