Components interface and types

Component Interface

Let's understand the interface:

1. Expand/Collapse arrow - If the Component accepts children or has composition, it will have a leading expand/ collapse-arrow indicator.
2. Component type icon - There are three different components to work with in Clutch.
   1. A Cloud component cloud icon (components installed from the component cloud)
   2. A Composition Component building block icon (a component defined by other components).
   3. A Code Component code icon (a component defined by React.js code)
3. Component Name - The Name of the Component at creation.
4. Close Composition Icon - If a composition component shows its composition, this icon will indicate that the components below are part of the composition. Close it if you do not want to edit it.
5. Component Instance Name - You can add an instance name to any component. The instance name is a unique name you can change to help keep your component tree organized or provide a clearer understanding of what that 'branch' of components does. If you do not provide an instance name, it will default to the Component Name.
6. Component in composition - Will be outlined in a violet color when hovered and solid violet when selected.

---

Components

Components are the building blocks of Clutch and creating your application.

Cloud Component

The Clutch Team creates cloud components installed in your project from the Clutch Cloud these components for ease of use. The cloud icon identifies these components.

Composition Component

A Composition Component is a component created from other components. In the example below the MyCustomComponent is made of 3 different components that define it. Composition components are identified by the building block icon, signifying that the Component contains other components. The building block icon identifies these components.

Code Component

Code components are custom components you can create in any project. These components allow you to write your custom code to define it. The code icon identifies these components.

Components in the composition tree

Nesting Components

Components that accept children will have a collapsible arrow indicator to the left of their name.

Slots

Some components accept multiple children in various slots, for example, the Input component from Clutch UI Kit has numerous places that render an adornment in either the tailing or leading position (or, in this example, both).
A Slot will have the slot icon (dashed box).

Component Composition

When you double-click a composition component to edit/alter the composition, the Component will have an x to signify that you are in the composition and provide a way to close it. The Composition tree will highlight the Composition Components in violet rather than blue.

Component Actions

Right-clicking, or clicking on the context menu of each Component's row, presents the following actions:

• New Component - Takes the selected Component and creates a new one from it and its children.
• Wrap in - Choose to wrap the Component in an If or Loop logic primitive (This is discussed more in the logic primitives section)
• Cut
• Copy
• Paste
• Duplicate
• Apply Component preset - This will set the selected Component to the default options applied on the preset Component marked for the library.
  Add to library - This will add the Component to the library
• Rename Instance - Change the component instance name in the project
• Remove Template - Deletes the Template.
• Change component type- Allows you to change the component type. For example, you can select a Box component and change it to a Typography component.
• Delete Instance - Removes Instance from the composition but does not delete the Component from the project.

Composition Component Actions

If the composition of your Component is showing and you right-click the Component, The Component Actions menu will show you some additional options.

Component actions

• Hide composition - This is the same as clicking the back arrow.
• Rename Component - this renames the Component, not the Instance, project-wide.
• Edit documentation - opens the component documentation viewer.
• Remove Component - removes the Component from the project.

---

More Info

📘

Proper Component naming convention

When creating and naming a new component users will need to create a name in PascalCase.

When changing a component instance name it is recommended to either use kebab-case or camelCase and provide an incremented integer for each occurring instance.

📘

Watch on YouTube an overview of Composition Panel