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. 1.
    props. – this is accessing any prop defined in the component
  2. 2.
    data. - this is accessing a data element from your hook
  3. 3.
    fns. - this is accessing a function from your hook
  4. 4.
    Hardcoded values e.g. “Hello World” or false
  5. 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