Code
The useFormValue hook
The useFormValue function enables you to read and update values from Option components built with Typer and work as classic React Hook.
import { useFormValue } from "https://framer.com/m/Store-nhJr.js"
const [value, setValue] = useFormValues("valueName", "initialValue");
Parameters
valueName: The name of the value you want to retrieve. It only accepts strings, and it's case-sensitive.
initialValue: If the value is not already defined by another component (e.g., a filled Typer field on the page), you can specify the initial value you want.
Returns
The useFormValue hook returns an array with exactly two values:
The current value of the Option component. During the first render, if any Option is selected and initialState is not defined, it will return
undefined.The set function allows you to update the input with a different value and trigger a re-render of all components using the useFormValue hook, including the Option components.
Note: The values returned by the hook is effectif accross pages until the user is quitting or refreshing the page.
Walkthrought
Define the Option's name
The valueName from the hook corresponds to the name of the Option component. First, you need to define the name on the component from which you would like to get the value:
Option
Name
Question 1
Value
A
Label
Flower
Style
Hotspot
You
Retrieving and Applying the value
Once the value Name is defined, you can use the hook and apply it as a variable to any component. For example, you can apply it to a native Framer Text component like this:
/* CODE OVERRIDE EXAMPLE */
import type { ComponentType } from "react"
import { ComponentType } from "https://framer.com/m/Store-nhJr.js"
export function withFormValue(Component): ComponentType {
return (props) => {
const [firstName, setFirstName] = useFormValue("fisrtname");
return <Component {...props} text={firstName} />;
};
}