Pass data from Builder or from your application directly to your custom component to customize styles or behaviors.
- Inputs to custom components in Builder are accessible to the component code through the component's props.
- Access dynamic values in Builder state within a custom component through the
builderStateproperty. - Pass data from your application directly into Builder state with the
dataattribute.
When a custom component is provided an input option, that value can be accessed directly within the component through props. This value is defined in code, but can be manipulated in Builder's Visual Editor.
Within the Visual Editor, you can set the value by clicking on the component and then going to the Options panel. There, change the input's value.
In the video below, the Options panel contains the text state value. When updated, the text within the CustomTip component is updated on the page.
By creating a custom input, you add user-defined state to a custom component within the Visual Editor. Your custom component will have access to that value as well.
In the video below, a new custom input is created within the Content Inputs panel called calloutText. This input is given a default value of "Tip".
You may also access application state within your custom components. This can be useful, for example, when you want to be able to influence the presentation of a component based on internal values within your application.
Read more about binding data within the Data binding overview. To learn how to add more values to state directly from Builder, visit Content inputs.