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

When adding props and bindings in the Quest editor as described above, these can be seen in the files you download, sync to GitHub or in the Code & Preview Mode.