Custom components

Custom components are reusable UI components consisting of one or more native Proto.io components.

Common uses of Custom components include:

  • Creating a Design System of components for your project
  • Grouping multiple components together to create commonly used blocks of content, e.g. Cards, Lists etc.

After being used on the canvas, Custom components can be customized like any other Proto.io component, by changing the size, text, and other properties.

Note

Unlike Containers, Custom components instances are fully independent of each other. Editing one instance of a Custom component will not affect other instances.

 

After adding Custom components, they will be available in the 4th tab of the Libraries panel:

Custom_components_-_Libraries.png

 

You can also use the "Search" popup (Ctrl/Cmd + F) to find any Custom components you have added to your project.

Adding a Custom component to your library

To add a Custom component:

  1. Select the UI item(s) you wish to add as a Custom component
  2. Click the "Add a custom component" button at the bottom of the Inspector panel
  3. Choose a name for your new Custom component

Replacing a custom component

To replace a Custom component with a newer version:

  1. Add the newer version as a new custom component
  2. Give the new version the same name as the original component
  3. Confirm the replacement through the confirmation popup that appears
Note

Replacing a Custom component will not update any instances of the component, already added to the canvas.

 

You can also Rename or Delete a Custom component by accessing the "Actions" menu at the top-left of each Custom component.

 

Have more questions? Submit a request