Working with Data

Dynamic Controls and Render Properties

In this guide so far, only static controls have been covered. That is, controls with a set, fixed value. Every property control, variant control, and render control in Clutch can be set using a dynamic control in lieu of the provided static controls.

Changing a control can be done from the control's context menu. Selecting either expression or function will result in a dynamic control.

However, to connect to anything, a parent component in the hierarchy needs to be emitting render properties.

Render Properties

Render properties are properties made available to children in a composition. For example, a GetUser component might pass down a Boolean value of loading to indicate that a network request is happening as well as an object, user itself. Children component of this GetUser component would then be able to use this data as needed. By default, Clutch passes root components properties down their composition to make component properties available to the entire composition. (Similar to how they would be available in React)

Expressions

Expressions map to JavaScript expressions, meaning any valid code that results in a value will work. They use a tokenized system of data input. As users write JavaScript, if a value is needed from a Render Prop, it can be simply selected and inserted into the code. The expression editor shows all available render props, which Component they originated from, and which ones are in use.

Exposing

A common workflow when crafting reusable components involves creating a property on the component root and then selecting a property on a child component, and linking them with a dynamic control. For example, a MyButton component might come with a label property. Inside the MyButton composition, there would somewhere be a dynamic control linking the value on label to the text value in the UI.

Since this occurs so often, an action exists in the context menu to facilitate this workflow. A user can go directly to the property they want to control from the root, select "Expose property", provide a property name, and the necessary and matching expression will be crafted with the existing value moved to the root component. The rendered output of a frame should be identical after completing the action,

Functions

Functions allow long-form code to be written. This code can utilize libraries from NPM and from other modules in your file system. Useful for complex data manipulations. Functions have a collapsible arguments area in the properties panel where Clutch controls can be used to pass in additional function arguments. Allowing the use of render properties in the functions and modules.