@reactiveProp

The @reactiveProp decorator creates a reactive property that automatically synchronizes with HTML attributes and triggers component updates when changed.

Usage

import { RadiantElement, customElement, reactiveProp } from '@ecopages/radiant';

@customElement('user-card')
export class UserCard extends RadiantElement {
	@reactiveProp({ type: String }) declare name: string;
	@reactiveProp({ type: Number, defaultValue: 0 }) declare age: number;
	@reactiveProp({ type: Boolean }) declare active: boolean;
}

Usage in HTML:

<user-card name="Alice" age="30" active></user-card>

Parameters

The decorator accepts an options object:

Parameter	Type	Required	Description
`type`	`AttributeTypeConstant`	Yes	`String`, `Number`, `Boolean`, `Object`, or `Array`.
`reflect`	`boolean`	No	Whether to reflect changes back to the attribute (default: `false`).
`attribute`	`string`	No	Custom attribute name (default: property name in kebab-case).
`defaultValue`	`any`	No	Default value if the attribute is not present.

Supported Types

String: Standard string attribute.
Number: Automatically converts string attributes to JavaScript numbers.
Boolean: Follows HTML boolean convention (presence = true, absence = false).
Object / Array: Complex types are serialized as JSON strings in the attribute.

Reflection

Use the reflect option to keep the HTML attribute in sync with the property value. This is useful for styling elements based on their state using CSS attribute selectors.

@reactiveProp({ type: Boolean, reflect: true }) declare active: boolean;

Learn More

@reactiveField - For internal reactive state.
@onUpdated - React to property changes.