Code SourcesAdvanced Prop Configurations

Using Functions as Props

Explore the benefits of passing functions as props to enhance the interactivity and behavior of your components.
View as Markdown

Note: Currently, this feature is only available for our React renderer.

Overview

This guide explains how to use callback functions and handlers within your prop configurations. Sometimes, you may need to pass a function into a component. This can be accomplished by using function props, allowing your components to handle events and execute custom logic efficiently.

1

Step 1: Add the function prop

The first step in the process involves adding the function prop to the components spec.

2

Step 2: Optionally, configure the function prop further

You can make this prop required, provide a default value, and provide a TypeScript Type.

3

Step 3: Click the "Save Changes" button and begin using functions as props!

The last step is to save the changes. Click the blue “Save Changes” button and begin using functions as props.

Screenshot 2024-07-25 at 10.40.16 AM.png

Conclusion

Pulling it all together we can now use functions as props 🎉

Screenshot 2024-07-25 at 10.44.35 AM.png