@tracetail/react
Version:
React hooks for TraceTail enterprise browser fingerprinting with over 99.5% accuracy. TypeScript support and React 18 compatibility.
164 lines (159 loc) • 4.96 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var js = require('@tracetail/js');
/**
* React hook for basic browser fingerprinting
*
* @example
* ```typescript
* import { useTraceTail } from '@tracetail/react';
*
* function MyComponent() {
* const { fingerprint, loading, error } = useTraceTail({
* apiKey: 'your-api-key',
* immediate: true
* });
*
* if (loading) return <div>Generating fingerprint...</div>;
* if (error) return <div>Error: {error.message}</div>;
*
* return <div>Visitor ID: {fingerprint?.visitorId}</div>;
* }
* ```
*/
function useTraceTail(options) {
const [fingerprint, setFingerprint] = react.useState(null);
const [loading, setLoading] = react.useState(false);
const [error, setError] = react.useState(null);
const traceTailRef = react.useRef(null);
// Initialize TraceTail instance
react.useEffect(() => {
if (!traceTailRef.current) {
traceTailRef.current = new js.TraceTail(options);
}
}, [options.apiKey, options.endpoint]);
const generate = react.useCallback(async () => {
if (!traceTailRef.current) {
throw new Error('TraceTail not initialized');
}
setLoading(true);
setError(null);
try {
const result = await traceTailRef.current.generateFingerprint({
verbose: true
});
setFingerprint(result);
return result;
}
catch (err) {
const error = err instanceof Error ? err : new Error('Unknown error');
setError(error);
throw error;
}
finally {
setLoading(false);
}
}, []);
const regenerate = react.useCallback(async () => {
setFingerprint(null);
return generate();
}, [generate]);
// Auto-generate on mount if immediate is true
react.useEffect(() => {
if (options.immediate && !fingerprint && !loading) {
generate().catch(() => {
// Error is already handled in generate function
});
}
}, [options.immediate, fingerprint, loading, generate]);
return {
fingerprint,
loading,
error,
generate,
regenerate
};
}
/**
* React hook for visitor identification with persistent storage
*
* @example
* ```typescript
* import { useVisitorId } from '@tracetail/react';
*
* function UserTrackingComponent() {
* const { visitorId, isReturningVisitor, loading } = useVisitorId({
* apiKey: 'your-api-key',
* storageKey: 'app_visitor_id'
* });
*
* return (
* <div>
* <p>Visitor: {visitorId}</p>
* <p>Status: {isReturningVisitor ? 'Returning' : 'New'} visitor</p>
* </div>
* );
* }
* ```
*/
function useVisitorId(options) {
const storageKey = options.storageKey || 'tracetail_visitor_id';
const [visitorId, setVisitorId] = react.useState(null);
const [isReturningVisitor, setIsReturningVisitor] = react.useState(false);
const { fingerprint, loading, error, generate } = useTraceTail({
...options,
immediate: true
});
// Update visitor ID when fingerprint changes
react.useEffect(() => {
if (fingerprint === null || fingerprint === void 0 ? void 0 : fingerprint.visitorId) {
const storedVisitorId = localStorage.getItem(storageKey);
if (storedVisitorId) {
setIsReturningVisitor(storedVisitorId === fingerprint.visitorId);
}
else {
setIsReturningVisitor(false);
}
setVisitorId(fingerprint.visitorId);
localStorage.setItem(storageKey, fingerprint.visitorId);
}
}, [fingerprint === null || fingerprint === void 0 ? void 0 : fingerprint.visitorId, storageKey]);
const refresh = react.useCallback(async () => {
await generate();
}, [generate]);
return {
visitorId,
isReturningVisitor,
loading,
error,
refresh
};
}
const TraceTailProvider = ({ children }) => {
// This is a simple provider that could be extended with context
// For now, it just renders children since hooks manage their own instances
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
};
/**
* Get the current React package version
*/
const getVersion = () => '2.3.4';
// Default export
var index = {
useTraceTail,
useVisitorId,
TraceTailProvider,
getVersion
};
Object.defineProperty(exports, "TraceTail", {
enumerable: true,
get: function () { return js.TraceTail; }
});
exports.TraceTailProvider = TraceTailProvider;
exports.default = index;
exports.getVersion = getVersion;
exports.useTraceTail = useTraceTail;
exports.useVisitorId = useVisitorId;
//# sourceMappingURL=index.js.map