Composable Component Architecture

Overview

The composable component architecture, introduced in PacketViewer 2025.2, provides developers with flexible options for building custom network analysis interfaces. This architecture allows you to combine individual components rather than relying solely on pre-built views, enabling tailored experiences for specific analysis needs.

This approach allows for:

• Creating specialized analysis interfaces
• Customizing layouts for different use cases
• Building interactive dashboards with only the components you need
• Integrating PacketViewer components seamlessly into your existing UI

Core Architecture

At the heart of this architecture is the PacketViewerProvider, which manages the state and context needed by all child components. This provider-based approach ensures components remain lightweight while sharing access to packet data, selected packets, and other critical state.

Key Components

The following components can be used within a PacketViewerProvider:

Getting Started

To use this architecture, first set up a PacketViewerProvider with your basic configuration:

import {
  PacketViewerProvider,
  PacketList,
  PacketTree,
  StatusBar,
} from "@qacafe/pv-react";
import "@qacafe/pv-react/style.css";

function MyCustomAnalysisView() {
  return (
    <PacketViewerProvider pcap="example.pcap" endpoint="/api" filter="http">
      <PacketList />
      <PacketTree />
      <StatusBar />
    </PacketViewerProvider>
  );
}

Provider Configuration

The PacketViewerProvider component takes these props:

export interface PacketViewerProviderProps {
  /** API baseURI endpoint to use */
  endpoint?: string;
  /** URL or filename of a PCAP on the server to load */
  pcap?: string;
  /** The name of a profile defined on the server */
  profile?: string;
  /** A starting display filter for the analysis */
  filter?: string;
  /** The initial selected packet */
  selectedPacket?: number;
  /** Additional API options like the interceptor, onApiError, and withCredentials flag */
  api_options?: PacketViewerProviderAPIOptions;
}

Additional Component Documentation

The detailed API documentation for all components is available in the Storybook that ships with the Docker image. You can learn about how to run and access Storybook from the Quick Start page.

Composing Components

The power of this architecture lies in the ability to compose components in any layout that suits your needs. Rather than being limited to pre-defined views, you can now create custom interfaces by combining components within the PacketViewerProvider context.

For example, you can build:

• Simple packet list viewers
• Split-pane interfaces with packets and decode information
• Full dashboard-style interfaces with multiple analysis components
• Specialized views focusing on specific protocols or metrics

Each component has its own set of props for customization, which are fully documented in the Storybook that ships with the Docker image.

Framework Compatibility

The composable component architecture is built specifically for React applications and leverages the React context API for state management. Key points to consider:

• React Only: These components require a React environment (16.14.0 or higher).
• Other Frameworks: If you’re using Vue, Angular, Svelte, or another framework, continue using the pre-built Views which can be more easily wrapped for integration. We currently do not offer framework-agnostic web components. Please contact QA Cafe Support if you need guidance on integrating PacketViewer with non-React frameworks.

Using Both Architectures

The pre-built Analysis Views (such as PacketViewer, ConversationsTableView, etc.) are fully supported alongside the composable component architecture. These Views offer a quick implementation path with minimal configuration, while the composable components provide greater flexibility for custom interfaces.

This dual approach gives you several options:

• Use the existing pre-built Views for standard analysis needs
• Build custom interfaces with the composable components for specialized workflows
• Mix both approaches within the same application as appropriate for different sections

Each approach has its advantages, with pre-built Views offering convenience and the component architecture providing more granular control over the user experience and interface layout.