BeagleLogPlugin

Abstract base class for creating custom log plugins in React Native Beagle

BeagleLogPlugin is an abstract class that serves as the foundation for creating custom log plugins. Plugins determine how different types of logs are displayed and handled in the Beagle interface.

Type Parameters

T · extends BeagleLog

The specific log type this plugin handles. Must extend BeagleLog.

Properties

name · string · required

The unique identifier for the plugin. This name is used to identify the plugin type throughout the system.

Abstract Methods

These methods must be implemented by all plugin subclasses.

canHandle()

abstract canHandle(log: BeagleLog): log is T;

Type guard that determines whether this plugin can handle a given log.

log · BeagleLog

The log to check

returns · log is T

TypeScript type predicate that narrows the log type to T if the plugin can handle it

provideDetailContent()

abstract provideDetailContent(log: T): DetailContent;

Generates the detailed content view for a log entry.

log · T

The log to generate content for

returns · DetailContent

The detail content structure, either ListContent or TabBarContent

Optional Methods

These methods have default implementations but can be overridden.

provideCardFooter()

provideCardFooter(_: T): Content | BoxContent | null;

Provides optional footer content for the log card in the list view.

log · T

The log to generate footer content for

returns · Content | BoxContent | null · default: "null"

Footer content to display, or null for no footer

exportToJSON()

exportToJSON(log: T): string;

Customizes how the log is exported to JSON format.

log · T

The log to export

returns · string · default: "JSON.stringify(log)"

JSON string representation of the log

Example

import { BeagleLogPlugin } from 'react-native-beagle';
import type { DetailContent } from 'react-native-beagle';

class MessageLogPlugin extends BeagleLogPlugin<MessageLog> {
  name: string = 'Message';

  canHandle(log: BeagleLog): log is MessageLog {
    return log instanceof MessageLog;
  }

  provideDetailContent(log: MessageLog): DetailContent {
    return {
      key: 'message',
      kind: 'list',
      children: [
        {
          kind: 'text',
          text: log.message,
          selectable: true,
        },
      ],
    };
  }
}

See Also

• Plugin Methods - Detailed explanation of plugin methods
• Creating Custom Plugins - Guide to building custom plugins