@hydration-tracker/react

React hooks for tracking hydration performance in SSR applications. Works with Next.js, Remix, and Astro.

Installation

npm install @hydration-tracker/react

Usage

Basic Hook

import { useHydrationTracker } from '@hydration-tracker/react';

function App() {
  const { data } = useHydrationTracker({
    onComplete: (data) => {
      console.log('Hydration score:', data.hydrationScore);
    }
  });
  
  return <div>...</div>;
}

Track Individual Components

import { useTrackHydration } from '@hydration-tracker/react';

function ExpensiveComponent() {
  useTrackHydration('ExpensiveComponent');
  
  return <div>...</div>;
}

With Dashboard Visualization

import { HydrationProvider, useHydrationData } from '@hydration-tracker/react';

function App() {
  return (
    <HydrationProvider>
      <YourApp />
      <HydrationDashboard />
    </HydrationProvider>
  );
}

function HydrationDashboard() {
  const data = useHydrationData();
  
  return (
    <div>
      <p>Score: {data?.hydrationScore}</p>
      <p>Time: {data?.totalHydrationTime}ms</p>
    </div>
  );
}

API

useHydrationTracker(options?)

Track hydration for the entire app.

Options

• onComplete(data) - Callback when hydration completes
• threshold - Minimum time (ms) to track (default: 1)

useTrackHydration(componentName)

Track hydration for a specific component.

HydrationProvider

Context provider for sharing hydration data across components.

useHydrationData()

Access hydration data from any component within the provider.

Export Functions

import { 
  exportHydrationData, 
  copyHydrationDataToClipboard, 
  downloadHydrationData 
} from '@hydration-tracker/react';

// Get JSON string
const json = exportHydrationData();

// Copy to clipboard (async)
await copyHydrationDataToClipboard();

// Download as file
downloadHydrationData('my-app-hydration.json');

Use these to get your data into the Hydration Cost Visualizer dashboard.

Peer Dependencies

• react >= 16.8.0

License

MIT