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
Example: Responsive Navigation
Resize your browser window to see the navigation change between mobile and desktop views.
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
- Yarn
- pnpm
- manual
npx @mindfiredigital/ignix-ui add breakpoint
yarn @mindfiredigital/ignix-ui add breakpoint
pnpm @mindfiredigital/ignix-ui add breakpoint
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
andhide
for simple conditional rendering. - Combine
from
andto
for more complex viewport logic. - Avoid nesting multiple Breakpoint components unnecessarily.