Responsive

Overview

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

Preview

Desktop Layout

Code

import Responsive from './components/layouts/responsive';

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

Installation

npm

npx @mindfiredigital/ignix-ui add responsive

yarn

yarn @mindfiredigital/ignix-ui add responsive

pnpm

pnpm @mindfiredigital/ignix-ui add 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

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	ReactNode	null	Component to render for mobile breakpoint.
tablet	ReactNode	null	Component to render for tablet breakpoint.
desktop	ReactNode	null	Component to render for desktop breakpoint.
fallback	ReactNode	null	Component to render when no breakpoint-specific one is available.