Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate

Guide 5 - Variables

👩‍🎓 Level: Intermediate


Learn how to employ user data provided in your prototype.

1. Add Input

To show interactivity we need an interactive component. Let's add an input.

Technical Note: For Interactive Elements you need an React.ChangeEventHandler or React.EventHandler property.

2. Define a variable

Below the input properties you'll find an Interaction Property. Set it to Set Variable. Next give it a name by typing in your desired name. Lastly you need to define the Payload. Set it to value.

To make use of your defined variable, you need to consume it in a component. In the Input component click on the link icon at the value property and select your previously defined variable.

4. Start typing away

You input component now accepts the value you type in. yay!


Next