Codux Help Center
Browse our articles to find the answers you need
Changing Prop Visualizer Types
Visualizers give you a quick way to input values for your component's properties and attributes. For example, a product-related component likely has a title prop to represent the title of the product (as in the example below), and a string visualizer is what supplies this title for rendering on the stage.
Codux chooses the most appropriate of the visualizer types for your props based on your component's code, but sometimes you might want to use a different visualizer to supply a different type of value. We've got you covered — just hover over the prop you want to change in the Properties panel, and select Swap visualizer.
For example, let's say that your component takes a string representing a color as input. When you enter a color as text and press the button in your app, the background color changes to the color you supplied. You might decide that you'd prefer to use a color picker to select your color though. Simply pick color from the dropdown list for the prop's new visualizer type, and Codux will provide you with a color picker instead of text field.
Visualizer Types
The following table contains a listing and description of the available visualizers for properties in Codux.
Visualizer | Description |
|---|---|
boolean | A True or False state for the element, such as whether a product component is already in the shopping cart. |
string | A string of text to provide the component's prop. |
number | A number to provide the component's prop. |
object | An object of values. Object values must first be initialized in the component's code. |
array | An array of values. Array values must first be initialized in the component's code. |
enum | Dropdown list of named constants from the component's code. |
color | A color selector for the element. |
Note:
If your component receives a function as a prop, you'll see the prop type show up as the function name in the properties panel:
Was this article helpful?
