Developer Guide

Packet Viewer for React

Packet Viewer is a library of React components that can be imported into your application to provide network capture file analysis capabilities. The library requires react > 16.14.0 and can be installed via the package manager of your choice.

The library is written in Typescript, and all types are exported for reference.

Usage

Copy the downloaded .tgz file and move into your repository. Install the library with npm:

npm i ./qacafe-pv-react-<VERSION>.tgz

Import the PacketViewer component into your React app, along with the required CSS stylesheet.

Make sure to update the endpoint prop to point at your company’s API service docker.

import { PacketViewer } from "@qacafe/pv-react";
import "@qacafe/pv-react/dist/main.css";

function MyPacketComponent(props: { pcap: string }) {
  return (
    <div>
      <PacketViewer
        file={props.pcap}
        endpoint="https://pv-sample-api.cloudshark.io/api"
      />
    </div>
  );
}

Available Props

interface IPacketViewerProps {
  file: string;
  profile?: string;
  endpoint?: string;
  filter?: string;
  className?: string;
  errorFallback?: ComponentType<FallbackProps>;
  onError?: (error: Error, info: ErrorInfo) => void;
}