Pre-defined control types
If you want more than the default timer, the next simpler way is to pass a controls property to your Model.
By doing so, you can use one or more of the pre-defined control types.
These control types are:
The controls props can be:
- an object, in which case you are specifying a single control, or
- an array, which is how you can arrange controls
Common props
All controls, except the Timer, have the following props -
| Name | Description |
|---|---|
| type string, optional, 'range' by default | The kind of control we're describing. Can be one of: checkbox, input, radio, range, select, timer or toggle. |
| label string, optional | The label which will describe the control. |
| name string, optional | The name of the control. If not specified, label will be used. |
| param string, optional | The param that this control will update. |
| resetOnChange boolean, optional, false by default | Whether the model will be reset if the control changes. |
| setParams function, optional | See below. |
| setValue function | This function will be called whenever the control changes to update its value. |
| value any | The current value of the control. |
setParams
By default, a control, when changed, will take its value and use it to update the param of the control, as is.
Instead, a setParams function can be created that takes, as input, the value of the control, and which will output an object with one or more params as keys.
With a setParams function, a control can update several params at once, or have a transformation between the value of the control and what is passed to the params.