Code Components and Props

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 an action

After the wizard has scanned & create the components, you can review and edit them.

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

  2. Click on the edit button next to any of the components we have created. You can edit or remove the component.

Component name - LocoAI automatically adds a meaningful name based on the context in the design.

Instances - Select or deselect items that should be turned into instances of your component.

Props - For each prop recommendation, you can edit its name, value, or remove the prop by clicking the cross on the right.

Editing components settings

Changing component name

  1. Hover over the component name to find the edit button.

  2. Click on the edit button.

  3. Now you can input the name you want for the component.

  4. Click on the save button.

Editing props

  1. Click on the name and value of any props to edit them.

  2. Click on the save button to apply your changes.

Detaching a component

If you want to remove a component or simply remove an instance of a component. Click the “Detach” button.

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