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;
}