Back to Docs
@millerbyte/react-logging

Getting Started

Last updated: 1/22/2026

@millerbyte/react-logging provides drop-in React components for displaying MillerByte Logging data. Built with TanStack Query and TanStack Table for server-mode fetching, pagination, sorting, and virtualized rendering.

Installation

Install the package and its peer dependencies:

npm install @millerbyte/react-logging @tanstack/react-query @tanstack/react-table @tanstack/react-virtual

Requirements

  • React 18+
  • @tanstack/react-query for server-mode fetching
  • @tanstack/react-table for table rendering
  • @tanstack/react-virtual for virtualized lists

Import Styles

Import the package styles once in your app entry point:

import "@millerbyte/react-logging/styles.css";

Quick Start (Recommended)

Use the built-in LoggingProvider and createLoggingClient helper to reduce setup boilerplate:

import { LoggingProvider, SessionList, createLoggingClient } from "@millerbyte/react-logging";

const loggingClient = createLoggingClient({
  baseUrl: "/api/logging",
  headers: () => {
    const token = localStorage.getItem("token");
    return token ? { Authorization: `Bearer ${token}` } : {};
  }
});

export const SessionsPage = () => (
  <LoggingProvider>
    <SessionList 
      fetchSessions={loggingClient.fetchSessions} 
      enablePolling 
      pollingInterval={15000} 
    />
  </LoggingProvider>
);

Using Existing QueryClient

If your app already has a QueryClient, pass it to the provider:

import { LoggingProvider, SessionList, createLoggingClient } from "@millerbyte/react-logging";
import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient();
const loggingClient = createLoggingClient({ baseUrl: "/api/logging" });

export const SessionsPage = () => (
  <LoggingProvider client={queryClient}>
    <SessionList fetchSessions={loggingClient.fetchSessions} />
  </LoggingProvider>
);

Server Mode vs Client Mode

Server Mode

Pass a fetch* function and let components manage pagination and caching:

<SessionList 
  fetchSessions={loggingClient.fetchSessions} 
  enablePolling 
  pollingInterval={15000} 
/>

Client Mode

Pass data arrays directly when you already have the data in memory:

<ActionList actions={myActionsArray} />

Data Shape

Server-mode fetchers must return a paginated response:

type PaginatedResponse<T> = {
  data: T[];
  totalCount: number;
  pageIndex: number;
  pageSize: number;
  totalPages: number;
};

Next Steps