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
You can also add Dynamic Custom Bindings which will allow to extend your application beyond the seeded bindings.
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
- You can now add Custom Bindings