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

Code

<Breakpoint 
  show="mobile"
  
  
  
>
  <p>This content is conditionally rendered based on the viewport size.</p>
</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.