Responsive

The Responsive component allows developers to render entirely different components or layouts depending on the active device breakpoint.
Unlike <Breakpoint>, which only hides or shows content, <Responsive> ensures only the correct component is rendered for the current screen size.

Preview

Desktop Layout

Code

import Responsive from '@ignix-ui/responsive';

function Example() {
  return (
    <Responsive 
      mobile={<MobileLayout />}
      tablet={<TabletLayout />}
      desktop={<DesktopLayout />}
      fallback={<DefaultLayout />}
    />
  );
}

Installation

CLI

ignix add component responsive

Manual

import React, { ReactNode, useEffect, useState } from "react";

type ResponsiveProps = {
  mobile?: ReactNode;
  tablet?: ReactNode;
  desktop?: ReactNode;
  fallback?: ReactNode;
};

const breakpoints = {
  mobile: "(max-width: 639px)",
  tablet: "(min-width: 640px) and (max-width: 1023px)",
  desktop: "(min-width: 1024px)",
};

const useBreakpoint = () => {
  const [current, setCurrent] = useState<"mobile" | "tablet" | "desktop">("desktop");

  useEffect(() => {
    const mobileQuery = window.matchMedia(breakpoints.mobile);
    const tabletQuery = window.matchMedia(breakpoints.tablet);
    const desktopQuery = window.matchMedia(breakpoints.desktop);

    const updateBreakpoint = () => {
      if (mobileQuery.matches) setCurrent("mobile");
      else if (tabletQuery.matches) setCurrent("tablet");
      else if (desktopQuery.matches) setCurrent("desktop");
    };

    updateBreakpoint();

    mobileQuery.addEventListener("change", updateBreakpoint);
    tabletQuery.addEventListener("change", updateBreakpoint);
    desktopQuery.addEventListener("change", updateBreakpoint);

    return () => {
      mobileQuery.removeEventListener("change", updateBreakpoint);
      tabletQuery.removeEventListener("change", updateBreakpoint);
      desktopQuery.removeEventListener("change", updateBreakpoint);
    };
  }, []);

  return current;
};

const Responsive: React.FC<ResponsiveProps> = ({ mobile, tablet, desktop, fallback }) => {
  const current = useBreakpoint();

  if (current === "mobile" && mobile) return <>{mobile}</>;
  if (current === "tablet" && tablet) return <>{tablet}</>;
  if (current === "desktop" && desktop) return <>{desktop}</>;

  return <>{fallback || null}</>;
};

export default Responsive;

Usage

import Responsive from '@ignix-ui/responsive';

Basic Example

function Page() {
  return (
    <Responsive
      mobile={<div>Mobile</div>}
      tablet={<div>Tablet</div>}
      desktop={<div>Desktop</div>}
      fallback={<div>Default</div>}
    />
  );
}

Different Layouts

function Dashboard() {
  return (
    <Responsive
      mobile={<MobileNav />}
      tablet={<TabletSidebar />}
      desktop={<DesktopSidebar />}
      fallback={<DefaultNav />}
    />
  );
}

Props

Prop	Type	Default	Description
mobile	React.ReactNode	-	Component to render for mobile breakpoint
tablet	React.ReactNode	-	Component to render for tablet breakpoint
desktop	React.ReactNode	-	Component to render for desktop breakpoint
fallback	React.ReactNode	-	Component to render when no breakpoint-specific one is available