Breakpoint

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

Example: Responsive Navigation

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

Code

Basic Usage

import { Breakpoint } from '@ignix-ui/breakpoint';

<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

CLI

ignix add component breakpoint

Manual

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

type BreakpointType = "mobile" | "tablet" | "desktop";

type BreakpointProps = {
  show?: BreakpointType;
  hide?: BreakpointType;
  from?: BreakpointType;
  to?: BreakpointType;
  children: ReactNode;
};

const breakpointValues: Record<
  BreakpointType,
  { min: number; max: number }
> = {
  mobile: { min: 0, max: 767 },
  tablet: { min: 768, max: 1023 },
  desktop: { min: 1024, max: Infinity },
};

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) {
    const { min, max } = breakpointValues[show];
    query =
      max === Infinity
        ? `(min-width: ${min}px)`
        : `(min-width: ${min}px) and (max-width: ${max}px)`;
  } else if (hide) {
    const { min, max } = breakpointValues[hide];
    query =
      max === Infinity
        ? `not (min-width: ${min}px)`
        : `not (min-width: ${min}px) and (max-width: ${max}px)`;
  } else if (from && to) {
    const min = breakpointValues[from].min;
    const max = breakpointValues[to].max;

    query =
      max === Infinity
        ? `(min-width: ${min}px)`
        : `(min-width: ${min}px) and (max-width: ${max}px)`;
  } else if (from) {
    const min = breakpointValues[from].min;
    query = `(min-width: ${min}px)`;
  } else if (to) {
    const max = breakpointValues[to].max;
    query = `(max-width: ${max}px)`;
  }
  const matches = useBreakpoint(query);

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

Usage

Import the component:

import { Breakpoint } from '@ignix-ui/breakpoint';

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 on tablet and desktop viewports.</p>
</Breakpoint>

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 the start of tablet up to the end of desktop viewports.</p>
</Breakpoint>

Props

Prop	Type	Default	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 the beginning of this breakpoint.
to	"mobile" | "tablet" | "desktop"	-	Render content up to the end of this breakpoint.
children	React.ReactNode	-	Content to be conditionally rendered.