react-responsive-wrapper

v1.0.0

Published

5 months ago

A zero-config HOC-like wrapper for automatic responsiveness in React/Next.js applications across all screen sizes

Downloads

0High
0Medium
0Low

ayushchauhan007

react responsive responsiveness nextjs hoc wrapper mobile tablet desktop scaling css-variables breakpoints

React Responsive Wrapper

Zero-config responsiveness for React/Next.js. One wrapper makes your app responsive across all screens.

Installation

npm install react-responsive-wrapper

Quick Start

Step 1: Wrap Your App

// 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 (
    <html>
      <body>
        <ResponsiveProvider designWidth={1440}>{children}</ResponsiveProvider>
      </body>
    </html>
  );
}

Step 2: Use CSS Variables

function MyComponent() {
  return (
    <div
      style={{
        padding: "var(--responsive-spacing-md)",
        fontSize: "var(--responsive-font-lg)",
      }}
    >
      This scales automatically!
    </div>
  );
}

With Tailwind CSS

Option 1: Arbitrary Values

<div className="p-[var(--responsive-spacing-md)] text-[var(--responsive-font-lg)]">
  Responsive with Tailwind
</div>

Option 2: Extend Tailwind Config (Recommended)

// 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:

<div className="p-r-md text-r-lg rounded-r-md">Clean Tailwind classes!</div>

CSS Variables

/* 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

useResponsive

import { useResponsive } from "react-responsive-wrapper";

function MyComponent() {
  const { breakpoint, scale, isMobile, isDesktop } = useResponsive();

  return (
    <div>
      <p>Breakpoint: {breakpoint}</p>
      {isMobile && <MobileNav />}
    </div>
  );
}

useBreakpoint

import { useBreakpoint } from "react-responsive-wrapper";

function MyComponent() {
  const { isAbove, isBelow } = useBreakpoint();

  return (
    <>
      {isAbove("tablet") && <Sidebar />}
      {isBelow("desktop") && <MobileMenu />}
    </>
  );
}

useResponsiveValue

import { useResponsiveValue } from "react-responsive-wrapper";

function Grid() {
  const columns = useResponsiveValue({
    mobile: 1,
    tablet: 2,
    desktop: 3,
    largeDesktop: 4,
  });

  return (
    <div style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
      {items.map((item) => (
        <Card key={item.id} />
      ))}
    </div>
  );
}

Components

ResponsiveContainer

import { ResponsiveContainer } from "react-responsive-wrapper";

<ResponsiveContainer contentWidth={1400} minPadding={20}>
  <YourContent />
</ResponsiveContainer>;

Show / Hide

import { Show, Hide } from 'react-responsive-wrapper';

<Show on={['mobile', 'tablet']}>
  <MobileNav />
</Show>

<Show above="desktop">
  <DesktopSidebar />
</Show>

<Hide on={['mobile']}>
  <ComplexWidget />
</Hide>

Breakpoints

| Breakpoint | Range | | -------------- | ------------- | | mobile | 0 - 767px | | tablet | 768 - 1023px | | desktop | 1024 - 1439px | | largeDesktop | 1440 - 1919px | | iMac | 1920px+ |

Configuration

<ResponsiveProvider
  designWidth={1440}    // Your design's base width
  minScale={0.5}        // Minimum scale factor
  maxScale={1.5}        // Maximum scale factor
>

Custom Breakpoints

<ResponsiveProvider
  breakpoints={{
    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' },
  }}
>

Override CSS Variables

:root {
  --responsive-spacing-md: calc(20px * var(--responsive-scale));
}

License

MIT