Setting Up Props & Bindings

​
For each component, Quest supports props and bindings. Props are React props that the component accepts from a parent component. You can set up props in Quest by clicking the top layer (called Component) in the left panel.
​
​
Then you can add one prop at a time from the right panel by clicking the + icon and giving each prop a name. A prop can be a data element or a function.
In addition to props, Quest supports bindings for each layer/element in your component. The bindings could be data bindings or functional bindings. For example for a text element, you could bind the “text” property to some data e.g. data.description. Also you could bind the “onClick” property to a function e.g. fns.handleClick
​
Points to note:
Bindings can contain the following
1.props. – this is accessing any prop defined in the component
2.data. - this is accessing a data element from your hook
3.fns. - this is accessing a function from your hook
4.Hardcoded values e.g. “Hello World” or false
5.Expressions which are combinations of the above e.g. “$” + data.price
​
The allowed bindings are context sensitive, different set of bindings are available for text vs image vs Material Components
You can also use bindings to do conditionals e.g. you can bind the “visible” property to data.isVisible

​

Fundamentals - Previous

Easily Sync Designs without Losing Work

Next - Fundamentals

Exporting Code

Last modified 3mo ago

Copy link