useMultinaireResponsiveDesign

Responsive design utilities for adaptive layouts across mobile, tablet, and desktop.

Usage

import { useMultinaireResponsiveDesign } from '@multinaire/multinaire-design';

function MyComponent() {
  const {
    width,
    height,
    orientation,
    breakpoint,
    isMobile,
    isTablet,
    isDesktop,
    maxWidths,
    getContainerProps,
  } = useMultinaireResponsiveDesign();

  if (isMobile) {
    return <MobileLayout />;
  }

  return <DesktopLayout {...getContainerProps(true)} />;
}

Return Value

Property	Type	Description
width	number	Current viewport width
height	number	Current viewport height
orientation	'portrait' | 'landscape'	Device orientation
breakpoint	'mobile' | 'tablet' | 'desktop'	Current breakpoint name
isMobile	boolean	True if width is 640px or less
isTablet	boolean	True if width is 641-1024px
isDesktop	boolean	True if width is greater than 1024px
maxWidths	object	Max width constraints
getContainerProps	function	Get responsive container props

Breakpoints

Breakpoint	Width Range
Mobile	0 - 640px
Tablet	641 - 1024px
Desktop	1025px+

Max Widths

const { maxWidths } = useMultinaireResponsiveDesign();

maxWidths.content  // 600px on non-mobile, undefined on mobile
maxWidths.modal    // 460px on non-mobile, undefined on mobile
maxWidths.button   // 250px on non-mobile, undefined on mobile

Container Props

Get props for responsive container styling:

const { getContainerProps, isMobile } = useMultinaireResponsiveDesign();

// Returns empty object on mobile, styled props on desktop
const containerProps = getContainerProps(true); // true = with margin

<MultinaireContainer {...containerProps}>
  {/* Content is centered with max width on desktop */}
</MultinaireContainer>

Examples

Responsive Layout

function ResponsiveScreen() {
  const { isMobile, isDesktop, getContainerProps } =
    useMultinaireResponsiveDesign();

  return (
    <MultinaireContainer
      flex={1}
      horizontal={isDesktop}
      {...getContainerProps()}
    >
      {isDesktop && <Sidebar />}
      <MainContent />
    </MultinaireContainer>
  );
}

Responsive Text

function ResponsiveTitle({ title }) {
  const { isMobile } = useMultinaireResponsiveDesign();

  return (
    <MultinaireText
      type={isMobile ? 'title' : 'heading'}
      weight="bold"
    >
      {title}
    </MultinaireText>
  );
}

Responsive Modal

function ResponsiveModal() {
  const { maxWidths } = useMultinaireResponsiveDesign();

  return (
    <Modal style={{ maxWidth: maxWidths.modal }}>
      {/* Modal content */}
    </Modal>
  );
}

TypeScript

import type {
  BreakpointName,
  Orientation,
  ResponsiveDesign,
} from '@multinaire/multinaire-design';