A zero-config HOC-like wrapper for automatic responsiveness in React/Next.js applications across all screen sizes
npm install react-responsive-wrapperbash
npm install react-responsive-wrapper
`
---
Quick Start
$3
`tsx
// app/layout.tsx (Next.js) or App.tsx (React)
import { ResponsiveProvider } from "react-responsive-wrapper";
import "react-responsive-wrapper/dist/responsive.css";
export default function RootLayout({ children }) {
return (
{children}
);
}
`
$3
`tsx
function MyComponent() {
return (
style={{
padding: "var(--responsive-spacing-md)",
fontSize: "var(--responsive-font-lg)",
}}
>
This scales automatically!
---
With Tailwind CSS
$3
`tsx
Responsive with Tailwind
`
$3
`js
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
"r-xs": "var(--responsive-spacing-xs)",
"r-sm": "var(--responsive-spacing-sm)",
"r-md": "var(--responsive-spacing-md)",
"r-lg": "var(--responsive-spacing-lg)",
"r-xl": "var(--responsive-spacing-xl)",
"r-2xl": "var(--responsive-spacing-2xl)",
},
fontSize: {
"r-xs": "var(--responsive-font-xs)",
"r-sm": "var(--responsive-font-sm)",
"r-md": "var(--responsive-font-md)",
"r-lg": "var(--responsive-font-lg)",
"r-xl": "var(--responsive-font-xl)",
"r-2xl": "var(--responsive-font-2xl)",
},
borderRadius: {
"r-sm": "var(--responsive-radius-sm)",
"r-md": "var(--responsive-radius-md)",
"r-lg": "var(--responsive-radius-lg)",
},
},
},
};
`
Then use:
`tsx
Clean Tailwind classes!
`
---
CSS Variables
`css
/ Spacing - scales with viewport /
--responsive-spacing-xs / 4px × scale /
--responsive-spacing-sm / 8px × scale /
--responsive-spacing-md / 16px × scale /
--responsive-spacing-lg / 24px × scale /
--responsive-spacing-xl / 32px × scale /
--responsive-spacing-2xl / 48px × scale /
/ Font sizes - with clamp for safety /
--responsive-font-xs through --responsive-font-3xl
/ Border radius /
--responsive-radius-sm/md/lg/xl
/ Scale factor /
--responsive-scale
`
---
React Hooks
$3
`tsx
import { useResponsive } from "react-responsive-wrapper";
function MyComponent() {
const { breakpoint, scale, isMobile, isDesktop } = useResponsive();
return (
Breakpoint: {breakpoint}
{isMobile &&
);
}
`
$3
`tsx
import { useBreakpoint } from "react-responsive-wrapper";
function MyComponent() {
const { isAbove, isBelow } = useBreakpoint();
return (
<>
{isAbove("tablet") &&
{isBelow("desktop") &&
);
}
`
$3
`tsx
import { useResponsiveValue } from "react-responsive-wrapper";
function Grid() {
const columns = useResponsiveValue({
mobile: 1,
tablet: 2,
desktop: 3,
largeDesktop: 4,
});
return (
repeat(${columns}, 1fr) }}>
{items.map((item) => (
))}
);
}
`
---
Components
$3
`tsx
import { ResponsiveContainer } from "react-responsive-wrapper";
;
`
$3
`tsx
import { Show, Hide } from 'react-responsive-wrapper';
`
---
Breakpoints
| Breakpoint | Range |
| -------------- | ------------- |
| mobile | 0 - 767px |
| tablet | 768 - 1023px |
| desktop | 1024 - 1439px |
| largeDesktop | 1440 - 1919px |
| iMac | 1920px+ |
---
Configuration
`tsx
minScale={0.5} // Minimum scale factor
maxScale={1.5} // Maximum scale factor
>
`
$3
`tsx
mobile: { min: 0, max: 599, label: 'Mobile' },
tablet: { min: 600, max: 1023, label: 'Tablet' },
desktop: { min: 1024, max: 1599, label: 'Desktop' },
largeDesktop: { min: 1600, max: 1919, label: 'Large' },
iMac: { min: 1920, max: Infinity, label: 'iMac' },
}}
>
`
$3
`css
:root {
--responsive-spacing-md: calc(20px * var(--responsive-scale));
}
``