Create a custom reusable component

Problem

You want to save time by creating a custom component that can be reused across your Dynaboard application.

Browse to the Custom Components tab in the Dynaboard editor
In the top-most panel, click the + button
Use the canvas to design your custom component
Use the Properties panel to configure the inputs to your custom component, which you can access on your page using {{ $props.propName }}
When you’re done, switch back to the Pages panel and select a Page where you’d like to use your new component
From the Command Bar browse to Custom and drag out your new component onto the canvas

You can change the layout style of your component and choose between Stack or Grid
- Stack mode is powered by CSS Flexbox and shares many of the same auto-layout properties. It is most useful for designing pixel-perfect, responsive layouts.
- Grid mode is powered by CSS Grid and gives you a simple yet powerful fixed grid framework. You may configure the number of columns, rows, and gutter sizing.
The Properties of custom components will appear inline whenever you use that component, allowing you to pass your own values and functions into your components.
- Use default values in your properties to test what your components look like while you build them.
You may nest containers like you would nest <div />'s to achieve the intended behavior. You can nest a Stack in a Grid in a Stack or whatever you can imagine.
Components can have functions, just like pages. These functions are attached to the lifecycle of the component, so when you set a function to run on load within a component, it will run when that component is rendered via an Instance.
If you’d like even greater control over how your custom component behaves, you can use a React component inside for more flexibility.

Components can be nested within one another, but cannot be themselves recursive (at the moment).