Skip to main content

Component

Trait Component 

Source
pub trait Component: Sized {
    type State;
    type Message: Clone;
    type Output: Clone;

    // Required methods
    fn init() -> Self::State;
    fn update(
        state: &mut Self::State,
        msg: Self::Message,
    ) -> Option<Self::Output>;
    fn view(
        state: &Self::State,
        frame: &mut Frame<'_>,
        area: Rect,
        theme: &Theme,
    );

    // Provided methods
    fn traced_view(
        state: &Self::State,
        frame: &mut Frame<'_>,
        area: Rect,
        theme: &Theme,
    ) { ... }
    fn handle_event(state: &Self::State, event: &Event) -> Option<Self::Message> { ... }
    fn dispatch_event(
        state: &mut Self::State,
        event: &Event,
    ) -> Option<Self::Output> { ... }
}
Expand description

A composable UI component with its own state and message handling.

Components are the building blocks of complex TUI applications. Each component manages its own state, handles its own messages, and renders to a specific area of the screen.

§Associated Types

  • State: The component’s internal state. Derive Clone if you need snapshots.
  • Message: Messages the component can receive from its parent or from user interaction.
  • Output: Messages the component emits to communicate with its parent. Use () if the component doesn’t need to communicate outward.

§Design Pattern

Components follow the same TEA pattern as App, but at a smaller scale:

  1. Parent sends Message to component
  2. Component updates its State
  3. Component optionally emits Output to parent
  4. Component renders itself to its designated area

Required Associated Types§

Source

type State

The component’s internal state type.

This should contain all data needed to render the component. Deriving Clone is recommended but not required.

Source

type Message: Clone

Messages this component can receive.

These typically come from user input or parent components.

Source

type Output: Clone

Messages this component can emit to its parent.

Use () if the component doesn’t need to communicate upward. This enables child-to-parent communication without tight coupling.

Required Methods§

Source

fn init() -> Self::State

Initialize the component state.

Returns the initial state for this component.

Source

fn update(state: &mut Self::State, msg: Self::Message) -> Option<Self::Output>

Update component state based on a message.

Returns an optional output message for the parent to handle. Return None if no parent notification is needed.

Source

fn view(state: &Self::State, frame: &mut Frame<'_>, area: Rect, theme: &Theme)

Render the component to the given area.

Unlike App::view which renders to the full frame, components render to a specific Rect area provided by their parent.

The theme parameter provides the color scheme to use for rendering. Use Theme::default() for the standard color scheme, or Theme::nord() for the Nord color palette.

Provided Methods§

Source

fn traced_view( state: &Self::State, frame: &mut Frame<'_>, area: Rect, theme: &Theme, )

Renders the component with optional tracing instrumentation.

When the tracing feature is enabled, this emits a trace-level span around the view call with the component type name and render area dimensions. When the feature is disabled, this is identical to calling view directly.

Source

fn handle_event(state: &Self::State, event: &Event) -> Option<Self::Message>

Maps an input event to a component message.

This is the read-only half of event handling. It inspects the component’s state and the incoming event, and returns an appropriate message if the event is relevant to this component.

The default implementation returns None (ignores all events). Components should override this to handle keyboard input when focused.

Source

fn dispatch_event( state: &mut Self::State, event: &Event, ) -> Option<Self::Output>

Dispatches an event by mapping it to a message and updating state.

This combines handle_event and update into a single call. If the event produces a message, the message is passed to update and the output is returned.

This is the primary method users should call for event routing.

Dyn Compatibility§

This trait is not dyn compatible.

In older versions of Rust, dyn compatibility was called "object safety", so this trait is not object safe.

Implementors§

Source§

impl Component for Accordion

Source§

impl Component for Breadcrumb

Source§

impl Component for Button

Source§

impl Component for Chart

Source§

impl Component for ChatView

Source§

impl Component for Checkbox

Source§

impl Component for Dialog

Source§

impl Component for Dropdown

Source§

impl Component for Form

Source§

impl Component for InputField

Source§

impl Component for KeyHints

Source§

impl Component for LogViewer

Source§

impl Component for Menu

Source§

impl Component for MetricsDashboard

Source§

impl Component for MultiProgress

Source§

impl Component for ProgressBar

Source§

impl Component for Select

Source§

impl Component for Spinner

Source§

impl Component for SplitPanel

Source§

impl Component for StatusBar

Source§

impl Component for StatusLog

Source§

impl Component for TextArea

Source§

impl Component for Toast

Source§

impl Component for Tooltip

Source§

impl<S: Clone + PartialEq + Default> Component for Router<S>

Source§

impl<T: Clone + 'static> Component for Tree<T>

Source§

impl<T: Clone + Display + 'static> Component for RadioGroup<T>

Source§

impl<T: Clone + Display + 'static> Component for SearchableList<T>

Source§

impl<T: Clone + Display + 'static> Component for SelectableList<T>

Source§

impl<T: Clone + Display + 'static> Component for Tabs<T>

Source§

impl<T: Clone> Component for LoadingList<T>

Source§

impl<T: TableRow + 'static> Component for DataGrid<T>

Source§

impl<T: TableRow + 'static> Component for Table<T>