circuit-bricks
Version:
A modular, Lego-style SVG circuit component system for React (ALPHA - Not for production use)
89 lines • 2.78 kB
TypeScript
/**
* SSR (Server-Side Rendering) Utilities
*
* Utilities for handling server-side rendering compatibility and hydration safety.
* These utilities help prevent client-server mismatch errors and ensure components
* work correctly in SSR environments like Next.js, Gatsby, and Remix.
*/
/**
* Check if code is running in a browser environment
*/
export declare const isBrowser: () => boolean;
/**
* Check if code is running on the server
*/
export declare const isServer: () => boolean;
/**
* Safe access to window object
*/
export declare const safeWindow: () => Window | null;
/**
* Safe access to document object
*/
export declare const safeDocument: () => Document | null;
/**
* Hook to detect when component has hydrated on the client
* This prevents hydration mismatches by ensuring client-only code
* only runs after hydration is complete.
*/
export declare const useIsClient: () => boolean;
/**
* Hook to safely access browser APIs after hydration
* Returns null during SSR and initial render, then the actual value after hydration
*/
export declare const useSafeBrowserAPI: <T>(getBrowserValue: () => T, fallbackValue?: T | null) => T | null;
/**
* SSR-safe localStorage access
*/
export declare const safeLocalStorage: {
getItem: (key: string) => string | null;
setItem: (key: string, value: string) => boolean;
removeItem: (key: string) => boolean;
};
/**
* SSR-safe sessionStorage access
*/
export declare const safeSessionStorage: {
getItem: (key: string) => string | null;
setItem: (key: string, value: string) => boolean;
removeItem: (key: string) => boolean;
};
/**
* SSR-safe DOM query selector
*/
export declare const safeQuerySelector: (selector: string) => Element | null;
/**
* SSR-safe DOM query selector all
*/
export declare const safeQuerySelectorAll: (selector: string) => NodeListOf<Element> | null;
/**
* SSR-safe event listener management
*/
export declare const safeEventListener: {
add: (element: Element | Window | Document | null, event: string, handler: EventListener, options?: AddEventListenerOptions) => boolean;
remove: (element: Element | Window | Document | null, event: string, handler: EventListener, options?: EventListenerOptions) => boolean;
};
/**
* SSR-safe viewport dimensions
*/
export declare const useViewportDimensions: () => {
width: number;
height: number;
};
/**
* SSR-safe media query hook
*/
export declare const useMediaQuery: (query: string) => boolean;
/**
* SSR-safe user agent detection
*/
export declare const useUserAgent: () => string;
/**
* Detect mobile devices
*/
export declare const useIsMobile: () => boolean;
/**
* Detect touch support
*/
export declare const useHasTouchSupport: () => boolean;
//# sourceMappingURL=ssrUtils.d.ts.map