React hooks for TraceTail enterprise browser fingerprinting with over 99.5% accuracy. TypeScript support and React 18 compatibility.
npm install @tracetail/react> React hooks for TraceTail enterprise browser fingerprinting with over 99.5% accuracy. Built for React 18 with full TypeScript support.
``bash`
npm install @tracetail/react
`tsx
import { useTraceTail } from '@tracetail/react';
function App() {
const { fingerprint, loading, error } = useTraceTail({
apiKey: 'your-api-key',
immediate: true
});
if (loading) return
✨ Features
- 🎯 Over 99.5% accuracy - Industry-leading device identification
- ⚡ React optimized - Built specifically for React with hooks
- 🔒 Enterprise security - Bank-grade fraud detection hooks
- 📱 Cross-platform - Works on all browsers and devices
- 🔧 TypeScript - Full type safety and IntelliSense
- 🌐 Incognito consistent - Same ID across normal and private browsing
- 🚀 Performance optimized - < 25ms fingerprint generation
- 🎣 React 18 ready - Supports concurrent features and Suspense
🎣 Hooks Reference
$3
Basic fingerprinting hook for visitor identification.
tsx
import { useTraceTail } from '@tracetail/react';function MyComponent() {
const { fingerprint, loading, error, generate, regenerate } = useTraceTail({
apiKey: 'tt_prod_...',
immediate: true, // Generate on mount
caching: true, // Cache results
debug: false // Enable debug logging
});
return (
{loading && Generating fingerprint...
}
{error && Error: {error.message}
}
{fingerprint && (
Visitor ID: {fingerprint.visitorId}
Confidence: {(fingerprint.confidence * 100).toFixed(1)}%
Processing Time: {fingerprint.processingTime}ms
)}
);
}
`
$3
Simplified hook focused on visitor identification with persistence.
tsx
import { useVisitorId } from '@tracetail/react';function UserTrackingComponent() {
const {
visitorId,
isReturningVisitor,
loading,
error,
refresh
} = useVisitorId({
apiKey: 'your-api-key',
storageKey: 'my_app_visitor_id' // Custom localStorage key
});
return (
{loading && Identifying visitor...
}
{error && Error: {error.message}
}
{visitorId && (
Visitor ID: {visitorId}
Status: {isReturningVisitor ? '🔄 Returning' : '✨ New'} visitor
)}
);
}
`
🌟 Advanced Usage
$3
tsx
import { useEffect, useState } from 'react';
import { useTraceTail } from '@tracetail/react';function SSRSafeComponent() {
const [isClient, setIsClient] = useState(false);
// Only run fingerprinting on client-side
const { fingerprint, loading } = useTraceTail({
apiKey: 'your-api-key',
immediate: isClient
});
useEffect(() => {
setIsClient(true);
}, []);
if (!isClient) {
return
Loading...;
} return (
{loading ? 'Generating...' : ID: ${fingerprint?.visitorId}}
);
}
`$3
tsx
import { useTraceTail } from '@tracetail/react';function useVisitorTracking() {
const { fingerprint, loading, error } = useTraceTail({
apiKey: process.env.REACT_APP_TRACETAIL_KEY!,
immediate: true
});
const trackingData = fingerprint ? {
visitorId: fingerprint.visitorId,
confidence: fingerprint.confidence,
isHighConfidence: fingerprint.confidence > 0.95,
processingTime: fingerprint.processingTime
} : null;
return { trackingData, loading, error };
}
// Usage
function App() {
const { trackingData, loading } = useVisitorTracking();
if (loading) return
Identifying visitor...;
return (
Visitor: {trackingData?.visitorId}
Confidence: {(trackingData?.confidence * 100).toFixed(1)}%
);
}
`$3
tsx
import { useQuery } from '@tanstack/react-query';
import { useTraceTail } from '@tracetail/react';function useUserProfile() {
const { fingerprint } = useTraceTail({
apiKey: 'your-api-key',
immediate: true
});
return useQuery({
queryKey: ['userProfile', fingerprint?.visitorId],
queryFn: () => fetchUserProfile(fingerprint?.visitorId),
enabled: !!fingerprint?.visitorId
});
}
`🔧 TypeScript Support
Full TypeScript definitions included:
tsx
import type {
FingerprintResult,
EnhancedFingerprintResult,
UseTraceTailReturn
} from '@tracetail/react';const MyComponent: React.FC = () => {
const result: UseTraceTailReturn = useTraceTail({
apiKey: 'your-key',
immediate: true
});
// Full type safety
const visitorId: string | null = result.fingerprint?.visitorId || null;
const confidence: number = result.fingerprint?.confidence || 0;
return
{visitorId};
};
`⚡ Performance Optimization
$3
tsx
import { lazy, Suspense } from 'react';const FingerprintComponent = lazy(() => import('./FingerprintComponent'));
function App() {
return (
Loading security...
$3
tsx
function ConditionalFingerprinting() {
const [needsFingerprint, setNeedsFingerprint] = useState(false);
const { fingerprint, loading } = useTraceTail({
apiKey: 'your-api-key',
immediate: needsFingerprint // Only when needed
}); return (
{needsFingerprint && (
{loading ? 'Checking...' : ID: ${fingerprint?.visitorId}}
)}
);
}
`🌐 Browser Support
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
- React Native WebView
- Electron
🔄 Migration Guide
$3
tsx
// Before (vanilla JS)
import { TraceTail } from '@tracetail/js';
const tracetail = new TraceTail({ apiKey: 'key' });
const fingerprint = await tracetail.generateFingerprint();// After (React hooks)
import { useTraceTail } from '@tracetail/react';
const { fingerprint, loading } = useTraceTail({
apiKey: 'key',
immediate: true
});
`$3
tsx
// Replace custom fingerprinting hooks
const { fingerprint } = useTraceTail({
apiKey: 'your-key',
immediate: true
});// Same visitor ID across sessions and devices
const visitorId = fingerprint?.visitorId;
``- Documentation: https://tracetail.io/docs
- API Reference: https://tracetail.io/api-docs
- Support: https://tracetail.io/support
- Discord: https://discord.gg/tracetail
- Email: support@tracetail.io
MIT License - see LICENSE file for details.
---