Smart Builder includes a handful of controls that you can use when building your app. This article will go into more detail about controls and how to use them with the Unbounce SDK.

Higher-Order Components

This type of method is a HOC (higher-order component). A higher-order component is a function that takes a component and returns a new component as a result (source).

In the app code, the HOC is imported from the window object in the config/global-dependencies/smart-builder-sdk file, then re-exported so you can make use of it in the rest of the app:

https://viewer.diagrams.net/?border=0&tags={}&highlight=0000ff&edit=_blank&layers=1&nav=1&title=documentation.drawio&open=R7Vjfc6IwEP5reGwngFT7KCp3N%2Bf9mPOh16ebVFZIGwgTYsX%2B9ZdIAgLqePW0N53zxeyX7JLst5tdsNxRUnzgOIu%2FsBCo5aCwsNyx5Ti2czuQfwpZl0h%2F0C%2BBiJNQL6qBGXkBDSKNLkkIeWOhYIwKkjXBOUtTmIsGhjlnq%2BayBaPNp2Y4gg4wm2PaRe9IKOISHXioxj8CiWLzZBvpmQSbxRrIYxyy1RbkTix3xBkT5SgpRkCV84xfSr1gz2y1MQ6pOEZhikTwlPqDX2j0Fb79mAbw6f7KLa08Y7rUB9abFWvjAQilQ7TIuIhZxFJMJzXqc7ZMQ1CPQVKq10wZyyRoS%2FARhFhrdvFSMAnFIqF6NheYi6FiSwIpS8FgAaFUmy33pTaz9%2FwaytmSz%2BHAoU0cYR6BOLDOqViS4Q0sAcHXUo8DxYI8N%2FeBdZxF1bqaCjnQbPwBM4MOM1Bk0re5BGfjzztpmuIHmX4N12JKolSO59JLwCXwDFwQGd9DPZGQMCxZhJy84IeNPeXwjJFUbE7l%2BZY3rihQBqCwdiSfVq5Dfpuc%2FeHX9bC2foWuUd8rTenr40rH59EcaOPf1WFqMzdNBbZY5DIS2pRVO3o9i97%2F%2FNq%2FrveW%2BdXvMEMSnV%2FvIbO8g5mFrm2nlVj2aYllUrbXstqycL5Mszt8zhIZ4f6S0FDS0ya1mVOrmAiYZXgT1ivZybTzh7MnGDHK%2BEbbVW1MbyhnFjKBtnA%2FCAI%2FOERoJ5%2F2clR1EuuWvKr7ENvEQ7zVg9ygM6WM03HxHUlVT%2BMg9vCouq%2BTvPwXfOa6%2F5rPet2w3FG8L%2B2ndmxV98qb%2Bcn0%2B5ctjFAQ8VOpX3tautfG1HhcbAtrI6TyvFtKSrw39pRQq20ko3fhInx7ZBF%2B0ybX7t7aVRV%2BP12ujXb7uG5z7eatdVopPn%2Btve2wNsyy0y61ViENNj%2BVIeatGVV12LyHO7sq881k4g9cZZClwtwe9l5OX19aznllSrH%2BLlCSVn9dcSe%2FAQ%3D%3D

What are HOCs intended for?

This method provides an easy and powerful way to use the Smart Builder built-in controls and create your own if you so wish to.

To recap, a control allows you the flexibility and options of customizing your component in Smart Builder.

Where do these controls appear in Smart Builder?

All the controls you use or create will appear in the floating toolbar in Smart Builder.

Click on any component (or element) in Smart Builder. The controls will appear within the floating toolbar:

Untitled

Syntax of Controls

Here is a sample complete code that comes with the HelloWorld app.