Breakpoint

Overview

The Breakpoint component provides a declarative way to conditionally render content based on the current viewport size. It eliminates the need for CSS media queries in your React components.

Preview

Preview

Example: Responsive Navigation

Resize your browser window to see the navigation change between mobile and desktop views.

Code

Basic Usage

<Breakpoint 
  show="desktop"
  
  from="desktop"
  to="mobile"
>
  <p>This content is conditionally rendered based on the viewport size.</p>
</Breakpoint>

Responsive Navigation Example

// Desktop Navigation (shows on tablet and desktop)
<Breakpoint from="tablet">
  <nav className="bg-gray-800 text-white p-4">
    <div className="flex items-center justify-between">
      <div className="text-xl font-bold">Logo</div>
      <div className="flex space-x-6">
        <a href="#" className="hover:text-blue-300">Home</a>
        <a href="#" className="hover:text-blue-300">About</a>
        <a href="#" className="hover:text-blue-300">Services</a>
        <a href="#" className="hover:text-blue-300">Contact</a>
      </div>
      <button className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">
        Sign In
      </button>
    </div>
  </nav>
</Breakpoint>

// Mobile Navigation (shows on mobile only)
<Breakpoint to="tablet">
  <nav className="bg-gray-800 text-white p-4">
    <div className="flex items-center justify-between">
      <div className="text-xl font-bold">Logo</div>
      <button className="p-2 hover:bg-gray-700 rounded">
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>
</Breakpoint>

Installation

npm

npx @mindfiredigital/ignix-ui add breakpoint

Yarn

yarn @mindfiredigital/ignix-ui add breakpoint

pnpm

pnpm @mindfiredigital/ignix-ui add breakpoint

manual

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

type BreakpointProps = {
show?: "mobile" | "tablet" | "desktop";
hide?: "mobile" | "tablet" | "desktop";
from?: "mobile" | "tablet" | "desktop";
to?: "mobile" | "tablet" | "desktop";
children: ReactNode;
};

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

function useBreakpoint(query: string): boolean {
const [matches, setMatches] = useState(false);

useEffect(() => {
const mediaQuery = window.matchMedia(query);
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const handleChange = () => setMatches(mediaQuery.matches);

handleChange();
mediaQuery.addEventListener("change", handleChange);

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
return () => mediaQuery.removeEventListener("change", handleChange);
}, [query]);

return matches;
}

export const Breakpoint: React.FC<BreakpointProps> = ({
show,
hide,
from,
to,
children,
}) => {
let query = "";

if (show) {
query = breakpoints[show];
} else if (hide) {
query = `not ${breakpoints[hide]}`;
} else if (from && to) {
query = `${breakpoints[from]} and ${breakpoints[to]}`;
} else if (from) {
query = breakpoints[from];
} else if (to) {
query = breakpoints[to];
}

const matches = useBreakpoint(query);

return matches ? <>{children}</> : null;
};

Usage

Import the component:

import { Breakpoint } from './components/ui';

Basic Usage

<Breakpoint show="mobile">
  <p>This content is visible only on mobile devices.</p>
</Breakpoint>
<Breakpoint hide="desktop">
  <p>This content is hidden on desktop devices.</p>
</Breakpoint>
<Breakpoint from="tablet" to="desktop">
  <p>This content is visible from tablet to desktop.</p>
</Breakpoint>

Props

Prop	Type	Description
show	"mobile" | "tablet" | "desktop"	Render content only on the specified device.
hide	"mobile" | "tablet" | "desktop"	Hide content on the specified device.
from	"mobile" | "tablet" | "desktop"	Render content starting from this breakpoint.
to	"mobile" | "tablet" | "desktop"	Render content up to this breakpoint.
children	ReactNode	Content to be conditionally rendered.

Examples

Show Content on Mobile

<Breakpoint show="mobile">
  <p>This content is visible only on mobile devices.</p>
</Breakpoint>

Hide Content on Desktop

<Breakpoint hide="desktop">
  <p>This content is hidden on desktop devices.</p>
</Breakpoint>

Render Content Between Tablet and Desktop

<Breakpoint from="tablet" to="desktop">
  <p>This content is visible from tablet to desktop.</p>
</Breakpoint>

Best Practices

• Use show and hide for simple conditional rendering.
• Combine from and to for more complex viewport logic.
• Avoid nesting multiple Breakpoint components unnecessarily.