atomico-hooks-props

Two-way data binding in web components is achieved by using a reactive hook that returns a synchronized value and setter pair. This writes directly to the host element property, allowing internal state updates to be observed by external consumers.

Custom element property updates remain invisible when using standard read-only prop access. A bidirectional reactive binding hook writes updates to the host element instance and triggers observer behavior, ensuring external consumers can observe the changes.

Controlled form inputs with Atomico are created by applying a bidirectional prop hook inside the component. This provides a getter and setter tuple that syncs internal state changes, like user input values, back to the host element for consumer observation.

Yes, you must declare the target prop in the component configuration to use reactive bindings. The hook enforces this requirement and will throw an error if the prop name is not declared, ensuring safe property synchronization.

Yes, reactive prop setters can optionally reflect updates to HTML attributes when configured. This ensures that bidirectional property updates are not only synced to the custom element instance but also mirrored in the DOM for attribute-based consumers.

Two-way reactive bindings support multiple value types including string, number, boolean, object, Date, and callbacks. The setter accepts direct values, functional updates, and can reset to null or undefined for flexible state management.