Controlled Mode

When working with Hopper components, you can customize a component's behavior using controlled or uncontrolled properties, depending on your needs. This flexibility is the foundation for building custom components on top of Hopper, enabling you to implement interactive features or modify the default behavior of components while preserving their visual style and structure.

Tip: To dive deeper into the concept of controlled and uncontrolled components in React, read React's guide here.

Uncontrolled Mode

Uncontrolled mode is great for situations where you don’t need to manage the component’s behavior with your own code.

In uncontrolled mode, the component manages its internal state. You provide an initial value using defaultX properties, and the component updates its state automatically in response to user interactions.

For example, to create a TagGroup where some tags are initially selected, use the defaultSelectedKeys prop:

In this example:

• defaultSelectedKeys: Specifies the initially selected items.
• The component handles the selection state internally.

Controlled Mode

Controlled mode is suitable for scenarios where the component's state depends on external data or when you need to respond programmatically to user interactions or when you need to build a custom component.

In controlled mode, you manage the state of the component externally by providing the X and onXChanged properties. This allows for full control over the component's behavior and is ideal for complex interactions or when the component's state is derived from external logic.

For example, to fully manage the selected tags:

In this example:

• selectedKeys: Represents the current selection, controlled externally.
• onSelectionChange: Callback invoked when the selection changes, allowing you to update the external state.

Choosing Between Controlled and Uncontrolled Modes

• Use uncontrolled mode (defaultX) for simpler use cases where internal state management by the component suffices.
• Use controlled mode (X and onXChanged) when external logic or advanced control is required.

By leveraging these modes, you can tailor Hopper components to meet your application's functional requirements while maintaining consistency and reusability.