Back to Docs
@millerbyte/react-logging

Hooks

Last updated: 2/22/2026

The package exports 7 hooks for building custom logging interfaces. These hooks power the built-in components and can be used directly for custom implementations.

useSessionList

Hook for managing session list state with pagination, sorting, and filtering. Wraps usePaginatedData with session-specific configuration.

import { useSessionList } from "@millerbyte/react-logging";

const SessionsPage = () => {
  const {
    rows,
    totalCount,
    pageIndex,
    pageSize,
    setPageIndex,
    setPageSize,
    sorting,
    setSorting,
    filters,
    setFilters,
    isLoading,
    error
  } = useSessionList({
    fetchSessions: loggingClient.fetchSessions,
    enablePolling: true,
    pollingInterval: 15000,
  });

  // Build custom UI with the data
};

Options

OptionTypeDescription
sessionsTInput[]Client mode: pass data array
fetchSessions(params) => PromiseServer mode: fetch function
dataAdapterDataAdapterTransform raw data to DTOs
initialPageSizenumberDefault page size (10)
initialFiltersFilterStateInitial filter values
enablePollingbooleanEnable auto-refresh
pollingIntervalnumberPolling interval (ms)
onDataDelta(prev, next) => voidCallback when data changes

Return Value

PropertyTypeDescription
rowsLoginSessionDto[]Current page data
totalCountnumberTotal items across all pages
pageIndexnumberCurrent page (0-indexed)
pageSizenumberItems per page
pageCountnumberTotal pages
setPageIndex(n) => voidChange page
setPageSize(n) => voidChange page size
sortingSortingStateCurrent sort state
setSorting(s) => voidUpdate sorting
filtersFilterStateCurrent filters
setFilters(f) => voidUpdate filters
isLoadingbooleanLoading state
errorunknownError state
isServerModebooleanWhether using fetch function

useActionList

Same API as useSessionList but for API actions. Uses actionsand fetchActions props.

const { rows, isLoading } = useActionList({
  fetchActions: loggingClient.fetchActions,
});

useUserList

Hook for managing user analytics list state with pagination, sorting, and filtering. Returns aggregated UserSummaryDto items. Added in v0.1.6.

import { useUserList } from "@millerbyte/react-logging";

const UsersPage = () => {
  const {
    rows,
    totalCount,
    pageIndex,
    pageSize,
    setPageIndex,
    setPageSize,
    sorting,
    setSorting,
    filters,
    setFilters,
    isLoading,
    error
  } = useUserList({
    fetchUsers: loggingClient.fetchUsers,
    enablePolling: true,
    pollingInterval: 30000,
  });

  // Build custom user analytics UI
};

Options

OptionTypeDescription
usersTInput[]Client mode: pass data array
fetchUsers(params) => PromiseServer mode: fetch function
dataAdapterDataAdapterTransform raw data to DTOs
initialPageSizenumberDefault page size (10)
initialFiltersFilterStateInitial filter values
enablePollingbooleanEnable auto-refresh
pollingIntervalnumberPolling interval (ms)
onDataDelta(prev, next) => voidCallback when data changes

Return Value

PropertyTypeDescription
rowsUserSummaryDto[]Current page data
totalCountnumberTotal items across all pages
pageIndexnumberCurrent page (0-indexed)
pageSizenumberItems per page
pageCountnumberTotal pages
setPageIndex(n) => voidChange page
setPageSize(n) => voidChange page size
sortingSortingStateCurrent sort state
setSorting(s) => voidUpdate sorting
filtersFilterStateCurrent filters
setFilters(f) => voidUpdate filters
isLoadingbooleanLoading state
errorunknownError state
isServerModebooleanWhether using fetch function

usePaginatedData

Generic pagination hook used internally by useSessionList, useActionList, and useUserList. Use directly for custom data types.

import { usePaginatedData } from "@millerbyte/react-logging";

const { rows, setPageIndex } = usePaginatedData({
  queryKey: "my-custom-data",
  fetchPage: fetchMyData,
  adapter: myDataAdapter,
});

useFilters

Manages filter state with utilities for updating and resetting.

import { useFilters } from "@millerbyte/react-logging";

const { filters, updateFilters, resetFilters, hasFilters } = useFilters({
  userId: "user123",
  isActive: true,
});

// Update a single filter
updateFilters({ statusCodes: [200, 201] });

// Reset all filters
resetFilters();

// Check if any filters are active
if (hasFilters) {
  showClearButton();
}

Return Value

PropertyTypeDescription
filtersFilterStateCurrent filter values
setFilters(f) => voidReplace all filters
updateFilters(partial) => voidMerge partial filter updates
resetFilters() => voidReset to initial state
hasFiltersbooleanTrue if any filter is set

useRealTimeUpdates

Tracks data changes between polls and triggers callbacks when data differs. Useful for notifications or highlighting new items.

import { useRealTimeUpdates } from "@millerbyte/react-logging";

useRealTimeUpdates({
  enabled: true,
  data: sessions,
  onDataDelta: (previous, next) => {
    const newSessions = next.filter(
      s => !previous.some(p => p.Id === s.Id)
    );
    if (newSessions.length > 0) {
      showNotification(`${newSessions.length} new sessions`);
    }
  },
});

useDebouncedValue

Debounces a value for use in search inputs or filter updates.

import { useDebouncedValue } from "@millerbyte/react-logging";

const [searchInput, setSearchInput] = useState("");
const debouncedSearch = useDebouncedValue(searchInput, 300);

// Use debouncedSearch for API calls
useEffect(() => {
  fetchResults(debouncedSearch);
}, [debouncedSearch]);