@yaseratiar/react-responsive-easy
Advanced tools
Revolutionary responsive development for React - Write once for desktop, scale everywhere automatically.
Traditional responsive development is time-consuming and repetitive:
/* Traditional approach - repetitive and error-prone */
.button {
font-size: 18px;
padding: 16px 24px;
border-radius: 8px;
}
@media (max-width: 768px) {
.button {
font-size: 14px;
padding: 12px 18px;
border-radius: 6px;
}
}
@media (max-width: 480px) {
.button {
font-size: 12px;
padding: 8px 12px;
border-radius: 4px;
}
}
Write once, scale everywhere with mathematical precision:
// Our approach - write once for desktop, auto-scale everywhere
const Button = () => {
const fontSize = useResponsiveValue(18, { token: 'fontSize' });
const padding = useResponsiveValue(16, { token: 'spacing' });
const radius = useResponsiveValue(8, { token: 'radius' });
return <button style={{ fontSize, padding, borderRadius: radius }}>
Click me
</button>;
};
# Install the core package
npm install react-responsive-easy
# Or with pnpm
pnpm add react-responsive-easy
# Or with yarn
yarn add react-responsive-easy
npx react-responsive-easy init
rre.config.ts:import { defineConfig } from 'react-responsive-easy';
export default defineConfig({
base: { width: 1920, height: 1080 },
breakpoints: [
{ name: 'mobile', width: 390, height: 844 },
{ name: 'tablet', width: 768, height: 1024 },
{ name: 'desktop', width: 1920, height: 1080 },
],
strategy: {
origin: 'width',
tokens: {
fontSize: { scale: 0.85, min: 12 },
spacing: { scale: 0.9, step: 2 },
radius: { scale: 0.95 },
}
}
});
import { ResponsiveProvider } from 'react-responsive-easy';
import config from './rre.config';
function App() {
return (
<ResponsiveProvider config={config}>
<YourApp />
</ResponsiveProvider>
);
}
import { useResponsiveValue } from 'react-responsive-easy';
const Hero = () => {
const fontSize = useResponsiveValue(48, { token: 'fontSize' });
const padding = useResponsiveValue(32, { token: 'spacing' });
return (
<h1 style={{ fontSize, padding }}>
Responsive Hero Title
</h1>
);
};
This is a monorepo containing multiple packages:
packages/
├── core/ # Core scaling engine and React hooks
├── cli/ # Command-line tools
├── babel-plugin/ # Babel transformation plugin
├── postcss-plugin/ # PostCSS processing plugin
├── vite-plugin/ # Vite integration
├── next-plugin/ # Next.js integration
└── dev-tools/ # Browser extension and debugging tools
apps/
├── docs/ # Documentation website
├── example-vite/ # Vite example application
└── example-nextjs/ # Next.js example application
# Clone the repository
git clone https://github.com/naa-G/react-responsive-easy.git
cd react-responsive-easy
# Install dependencies
pnpm install
# Start development
pnpm dev
# Build all packages
pnpm build
# Run tests
pnpm test
# Lint code
pnpm lint
# Type check
pnpm type-check
# Start development servers
pnpm dev
react-responsive-easy/
├── packages/ # Core packages
├── apps/ # Example applications
├── tools/ # Development utilities
├── configs/ # Shared configurations
├── .github/ # GitHub workflows
└── docs/ # Documentation
We maintain comprehensive test coverage across:
# Run all tests
pnpm test
# Run tests with coverage
pnpm test:coverage
# Run E2E tests
pnpm test:e2e
We welcome contributions! Please see our Contributing Guide for details.
git checkout -b feature/amazing-featurepnpm testgit commit -m 'Add amazing feature'git push origin feature/amazing-featurePhase 6: Comprehensive Testing & Documentation is now COMPLETE!
We've established enterprise-grade quality assurance and reliability for React Responsive Easy with a fully functional testing infrastructure and resolved all TypeScript compatibility issues across the entire monorepo.
rre() functions into responsive CSSBabel Plugin - JavaScript/TypeScript Transformations:
// Write this in your components:
const fontSize = useResponsiveValue(24, { token: 'fontSize' });
// Gets transformed to optimized code with pre-computed values
const fontSize = useMemo(() => {
switch (currentBreakpoint.name) {
case 'mobile': return '20px';
case 'tablet': return '22px';
case 'desktop': return '24px';
default: return '24px';
}
}, [currentBreakpoint.name]);
PostCSS Plugin - CSS Processing:
/* Write this in your stylesheets: */
.button { font-size: rre(18); }
/* Gets transformed to responsive CSS: */
:root {
--rre-font-size: 18px;
}
@media (max-width: 768px) {
:root { --rre-font-size: 15px; }
}
.button { font-size: var(--rre-font-size); }
Vite Plugin - Modern Development:
// vite.config.js
import { reactResponsiveEasy } from '@react-responsive-easy/vite-plugin';
export default {
plugins: [
reactResponsiveEasy({
precompute: true,
generateCustomProperties: true
})
]
}
Next.js Plugin - Full-Stack Integration:
// next.config.js
const { withReactResponsiveEasy } = require('@react-responsive-easy/next-plugin');
module.exports = withReactResponsiveEasy({
ssr: true,
precompute: true
})({
// your Next.js config
});
<ResponsiveProvider>)useResponsiveValue, useScaledStyle, etc.)initialBreakpoint@react-responsive-easy/cli)rre init)rre build)rre analyze)rre dev)@react-responsive-easy/babel-plugin)@react-responsive-easy/postcss-plugin)@react-responsive-easy/vite-plugin)@react-responsive-easy/next-plugin)React Responsive Easy is built for production performance:
This project is licensed under the MIT License - see the LICENSE file for details.
⭐ Star this repository if you find it helpful!
Made with ❤️ by naa-G
FAQs
Revolutionary responsive development for React
We found that @yaseratiar/react-responsive-easy demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.