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.

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