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.
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.
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'.
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
onClickevent passed a state setter via binding will receive first the event the button receives anyway, then the Clutch-passed state setter.
Updated about 1 month ago