Veryfront Logo

Creating Components

What are Components?  

Components are one of Veryfront’s most powerful features. They are functionally identical to React components and you can also compare them to Sketch symbols or Figma components. A component can be as simple as a button or as complex as an entire page.

Components let you create reusable UI elements and significantly speed up the composition of your app. If you use similar UI elements on multiple pages, it’s time to consider creating components. This way, you only have to write your code once and can reuse it in your project as needed.

When you change a component’s code, all its instances reflect those changes. However, you can customize the individual instances to suit your needs using component props.

Create a Component  

In Veryfront, you can create a component in two ways: from the Sidebar Component menu or existing code.

Create a Component via the Sidebar  

Open the Components menu in the Sidebar.

Components Menu Menu Icon

Click the plus icon in the top right corner to create a new component.

Components Menu New Component

Enter a component name.

Note: Component names must be unique.

New Component Overlay

Veryfront opens your component in the Live Editor, where you can edit its code.

Your new component is immediately available under the Insert menu in the Sidebar, from where you can add it to a page.

Sample Page With Components Menu

Create a Component From Existing Code  

Select the part of your code that you want to turn into a component.

Warning: If you select an invalid code portion, Veryfront still generates a new component but may run into build errors.

Right-click your selection and click "Create component from selection".

Component From Code Selection And Menu

Enter a component name.

New Component Overlay

Note: Component names must be unique.

Your new component is immediately available under the Insert > Custom Components menu in the Sidebar.

Veryfront automatically replaces the extracted snippet with a reference to the new component.

Add Content to a Component  

You can add content to a component using MDX.

Use a Component in Another Component or Page  

Open the respective menu (Components or Pages menu) in the Sidebar.

Components Pages Menu Menu Icon

Select the component or page to edit it in the Live Editor.

Pages Menu Edit Page

Open the Insert menu in the Sidebar to see a list of available components divided by categories.

Sample Page With Components Menu

Click a category and choose a component to insert its snippet at the current cursor position in the Live Editor. This also generates the relevant import statement if required.

Sample Page With Components Menu Inserted

Rename a Component  

Select the Components menu in the Sidebar to see a list of your project’s custom components.

Components Menu Menu Icon

Hover over the component you want to edit and click the edit icon to open the Edit Component overlay.

Components Menu Edit Component Icon

Edit your component’s name and confirm.

Note: The component name must be unique.

Edit Component Overlay

Edit a Component’s Path  

Select the Components menu in the Sidebar to see a list of your project’s custom components.

Components Menu Menu Icon

Hover over the component you want to edit and lick the edit icon to open the Edit Component overlay.

Components Menu Edit Component Icon

Edit your component’s path and confirm.

Warning: When you update a component’s path, you must also update the relevant import statements in your project files to prevent import errors.

Note: The component path must be unique.

Edit Component Overlay

Delete a Component  

You can delete a component from the Edit Component overlay.

Warning: Deleting a component is irreversible!

Pass Data to a Component  

You can pass data to components using custom props, which can be any valid JavaScript variable or literal. Component props are a core feature of React.

You can access this data within each component’s code through the props global.

<Heading>{props.title}</Heading>

<Text>{props.textContent}</Text>

You can define defaultProps and previewProps in a component’s frontmatter:

  • previewProps: use them during development to display preview values in the Live Preview while editing a component in the Live Editor.
  • defaultProps: use them to set default values for your component. You can overwrite them via component props when you use the component.
---
previewProps:
  heading: "Placeholder Title"
  textContent: "Placeholder text content."
defaultProps:
  heading: "Default Title"
  textContent: "Default text content."
---

<Heading>{props.title}</Heading>

<Text>{props.textContent}</Text>
<  Creating PagesApp Component  >
Veryfront Logo

GDPR
COMPLIANT


© 2022 CoderSociety GmbH. Hosted in Germany.

Made with Veryfront