Dynamic Data

There are two ways to make props values dynamic via the Clutch interface: Expressions and Functions.

Making a property dynamic is available from the context menu by selecting either Expression or Function from the list of controls.

Expressions

JavaScript expressions are any single valid unit of code whose execution returns a value. More commonly this could be referred to as a "one-liner". Clutch's expression interface provides a list of currently available render properties, both from the root component, as well as from other components higher up the hierarchy that may be emitting props. Users can type any valid JavaScript, in combination with the provided tokens to craft an expression. The prop value will be the result of the expression.

Functions

Functions allow dynamic controls a bit more flexibility. Much like expressions, they can use properties from the render properties, however, in the case of functions, these are passed in as arguments to a function. The function itself must be a module that exports a function by default.

Spread

Rather than individually binding properties that will handle a function you can simplify and set properties quicker with the 'spread' property.

We will use the 'Hover' example from React PowerPlug to show more in detail.

Here we have a Hover component with two text elements. One asking, 'Is the mouse hovering this text?', where we will bind the spread property of 'onMouseEnter' and 'onMouseLeave'. The second being the text that is bound to the state of each property.

To have the spread property visually represented we will bind the text value to the 'hovered' prop that is set to 'false' by default.

Now that our spread property is bound to the hover component object of properties we can see when the mouse is hovered over the 'Is the mouse hovering this text?' and will change from the hovered value of 'false' to 'true'.

Expose

Exposing a property value will take the value of whatever property you are on, put it on the parent component while copying the value of the control over making it a dynamic bind.

🚧

Note about passing arguments in

Arguments passed into modules and functions in Clutch are passed in last, meaning a onClick event passed a state setter via binding will receive first the event the button receives anyway, then the Clutch-passed state setter.