Custom Components
Create Custom Components and Craft Your Own Library
What is a Custom Component?
When starting a new project, developers often create their own components. This approach simplifies maintenance and enhances the manageability of our codebase. For example, when a design change is needed for the buttons, it allows us to update a single component's style without having to adjust each button on every screen individually.
Creating custom components also makes the code more readable. Typically, incorporating all components on a screen results in lengthy and complex code. To improve readability, we segment the screen's code by creating new components.
That's why Monday Hero enables you to create custom components! You can select any part of the screen and simply click 'Create Custom Component' to begin. Monday Hero provides the freedom to create any component that’s needed.
In Monday Hero, custom components consist of system components. For instance, a custom component might be a section of the screen that includes buttons, texts, and text fields, making it more readable and reusable.
Monday Hero users generally create two types of components in their projects:
Compact Custom Component: This type of component is used to create a new style for a system component, such as a button. For example, you might want to create a 'Primary Button' to maintain design consistency across various screens. These components are standalone and do not contain other components within them, like a button that does not include a text field inside. Thus, they are termed compact components.
For this example, login and signup buttons are called
PrimaryButton. The component code is separately created, so it can be reused.
Custom Component Group: This type of component is a part of any screen and is designed to make the code shorter so it's more readable. It may include compact custom components or any other type of component within it.
How to Create a Custom Component
Navigate to the Screen: Go to the screen from which you want to create a component.
Highlight Layers: Highlight the layers on the screen that you wish to convert into a component.
Select the Component Type: You can select the component type in three different ways:
Use the smart suggestions provided for component types. If the suggestions do not meet your needs, click 'More' to view the complete list of available components.
Right-click and select the component type from the menu.
Alternatively, click the components icon and select 'Create New Component'. Then, choose the component type from the list.
Set properties: Once you select the component type, a new screen will appear on the left.
For each layer, select the necessary properties such as title, image, or background image. These options will appear in a list.
Properties will be automatically guessed by Monday Hero, but remember to adjust them if they don’t match the correct properties.
Note: Some components do not have any properties. Here is a widget that does not have property selection:
Name Your Component: You will name your component during this step. This name is used to reference your component in your code, making it important to choose a name that you prefer.
Finish: Click 'Finish' to complete the creation process. Once finished, you will see a confirmation message indicating that the component was created successfully.
Once the component is created successfully, you'll be able to see its code, and it will be ready for reuse.
All the custom components that you have created in your project will be visible in your custom component library.
Congrats! It's done.
Last updated
