Components & Props

Creating components and props helps you to get modularised code with better structure and organisation. It also reduces code duplication and lets you easily render content with dynamic data.

With LocoAI, we split the code generated by us into reusable components with props.

Reviewing component

After the Locofy.ai wizard scans and creates the components, you can review and edit them.

1. Click on the Review button next to Code Components and Props.

2. Click the edit button next to any component to modify it, or click view to see its preview in the panel.

3. After selecting edit, you can modify or detach the component using the detach icon in the header. An edit icon beside the detach icon lets you change the component name. You can also edit or delete any existing props within the component.

Creating component

The Locofy plugin offers two modes: preview and edit. Each mode provides different methods for creating components.

Preview mode

1. Click on the Manual Optimization and then navigate to Create Components and Props

2. Just pick the layer you want to turn into a component and click Create, Once it's made, you'll see it in the preview and the code down below.

Edit mode

1.Switch to edit mode and click the layer you want to convert into a component. This will immediately display the Create Component popup highlighting the selected layer.

2. Click Create Component, enter a name for your component, and then save it. Upon successful creation, you'll see the component settings on the right and the code at the bottom.

Edit components settings

Ways to Access Component Settings

As detailed in the Creating Component documentation, the Locofy plugin offers two modes for working with components: Preview and Edit. Here's how to access the component settings in each mode:

Preview mode

Refer to the Reviewing Components documentation above for instructions on accessing component settings in preview mode.

Edit mode

1. Switch to edit mode and click on a component layer. Upon clicking, the Edit Component popup will appear, highlighting the selected component.

2. Selecting Edit Component from the popup takes you to the edit component section, where you can modify the component's properties.

Changing component name

Within the component edit settings, simply click the edit button next to the component name to modify it. Once you've made your changes, save them to finalize the update.

Detaching a component

To remove a component, simply click the Detach button.

You will then be prompted to make a decision to detach all the instances, or just the selected instance.

Adding Props to Components

Within the component settings, you have two options for adding props. One is the the edit component section and other is in the preview section

In edit settings section

1. Click on the plus icon

2. Select a prop from the list

3. Here you will get three options - value prop, style prop and conditional rendering prop

• Value prop: To add value to your prop

• Style prop: To add css style as a prop

• Conditional rendering: Locofy allows you to control the visibility of components based on certain conditions using conditional rendering props. You can achieve this by:

a) Creating new prop - Define a new prop specifically for controlling the visibility of the component.

b) Using existing prop - Use an existing prop's value to determine whether to render the component.

In preview section

1. While working in the edit component section, the corresponding component will be highlighted in the preview area. Here, you can directly add props by clicking on any element within the highlighted component in the preview. This will trigger the Add Prop popup to appear.

2. Click on the Add Prop popup. You'll see three prop options: value prop, style prop, and conditional rendering prop. Refer to point #3 in the above section for more details.

Editing props

1. Click on edit icon corresponding to the prop you want to modify and then just save to apply your changes.

Deleting props

To delete a prop, click the delete icon next to it.

Locofy Builder allows you to manage and modify components and props. For more information, refer to Auto components and props (opens in a new tab) and Adding style props for dynamic styles (opens in a new tab) from the Builder (opens in a new tab) docummentation.