Components in Nordcraft need clearly defined interfaces to interact with the rest of your application, and they follow a specific lifecycle as they are created, updated and removed from the page.

The interface of a component defines how it communicates with other parts of your application. There are three communication channels

• Attributes: Data flow into the component (input)
• Events: Data flow out to parent components (output)
• Contexts: Data flow between parent and any descendant components

These mechanisms enable components to be configurable, reusable, and interactive.

Define an attribute

Live

Attributes are the primary way to pass data into a component:

1. 1

   Open the component and view the data panel with no element selected
2. 2

   In the Attributes section, click the + button
3. 3

   Configure the attribute:
   • Name: A unique name that must consist of lowercase letters, numbers, hyphens ( -) and underscores ( _) only
   • Test value: The value used in the editor, also to determine the attribute type

Attributes allow you to create configurable components that can:

• Alter their behavior based on the data they are passed
• Display different content or styling
• Access data fetched by parent components
• Be reused throughout your application with different configurations

For example, a tooltip component might use attributes to control:

• Which side the tooltip appears on (left, right, top, bottom)
• How much delay occurs before showing the tooltip
• What content appears inside the tooltip
• Whether the tooltip has a close button

Set up an event

Live

Events allow components to communicate upward to parent elements:

1. 1

   Open the component and view the data panel with no element selected
2. 2

   In the Events section, click the + button
3. 3

   Configure the event:
   • Name: A descriptive name for the event
   • Test value: Example data that defines the event's output structure, allowing you to develop event handling in parent components without actual event triggers.

Events enable child components to send messages and data up to their parent components, complementing the downward data flow of attributes. While attributes pass data from parent to child, events pass data from child to parent.

Unlike HTML element events that trigger automatically on user interactions, component events must be explicitly triggered from within the component:

• From an element event: Select the triggering element (e.g., a button), go to events tab and find the appropriate HTML event (e.g. click)
• From a workflow: Create or edit a workflow

Trigger an event

Live

1. 1

   Click the + button to add a new action
2. 2

   Select in Events the Trigger: event action for desired component event to trigger
3. 3

   Define the data payload to send with the event

In addition to attributes and events, components can communicate through contexts. Contexts provide an alternative communication channel that allows components to share data and functionality across the component tree without passing through intermediaries.

Components go through several phases during their existence in your application.

When a component is first added to a page or another component:

1. 1

   The component is created with its default structure
2. 2

   Attribute values are applied
3. 3

   Variables are initialized with their default values
4. 4

   The On load event is triggered

The initialization phase is the right time to:

• Set up initial state based on attributes
• Fetch initial data from APIs
• Perform one-time setup operations

Add initialization logic

Live

To add initialization logic:

1. 1

   With no element selected, view the data panel
2. 2

   In the Lifecycle section, click on the On load event
3. 3

   Add actions to the On load event

After initialization, components respond to changes in their attributes:

1. 1

   When an attribute value changes, the On attribute change event is triggered
2. 2

   The component updates to reflect the new attribute values

This phase is useful for:

• Updating internal state based on new attribute values
• Triggering recalculations or API calls
• Updating the component's appearance

Add logic on attribute change

Live

To add attribute change logic:

1. 1

   With no element selected, view the data panel
2. 2

   In the Lifecycle section, click on the On attribute change event
3. 3

   Add actions to the On attribute change event

Components maintain their own internal state using variables. Component variables are:

• Private to the component instance
• Preserved as long as the component is on the page
• Reset when the component is removed and added again

Understanding component interfaces and lifecycle helps you create components that integrate seamlessly with the rest of your application and behave predictably as your application state changes.