@papernote/ui
Version:
A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive
59 lines • 1.59 kB
TypeScript
import { ReactNode } from 'react';
type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
interface ResponsiveProps {
children: ReactNode;
above?: Breakpoint;
below?: Breakpoint;
only?: Breakpoint;
className?: string;
}
/**
* Show component - renders children only at specified breakpoints
*
* @example
* // Show on medium screens and above
* <Show above="md">
* <DesktopNavigation />
* </Show>
*
* // Show only on large screens
* <Show only="lg">
* <LargeScreenContent />
* </Show>
*
* // Show below medium screens
* <Show below="md">
* <MobileNavigation />
* </Show>
*/
export declare function Show({ children, above, below, only, className }: ResponsiveProps): import("react/jsx-runtime").JSX.Element;
/**
* Hide component - hides children at specified breakpoints
*
* @example
* // Hide on medium screens and above
* <Hide above="md">
* <MobileOnlyContent />
* </Hide>
*
* // Hide only on large screens
* <Hide only="lg">
* <NonLargeScreenContent />
* </Hide>
*
* // Hide below medium screens
* <Hide below="md">
* <DesktopOnlyContent />
* </Hide>
*/
export declare function Hide({ children, above, below, only, className }: ResponsiveProps): import("react/jsx-runtime").JSX.Element;
/**
* useMediaQuery hook - React hook for responsive logic in components
*
* @example
* const isMobile = useMediaQuery('(max-width: 768px)');
* const isDesktop = useMediaQuery('(min-width: 1024px)');
*/
export declare function useMediaQuery(query: string): boolean;
export {};
//# sourceMappingURL=ResponsiveUtilities.d.ts.map