responsiveease v1.0.8

ResponsiveEase

ResponsiveEase is a simple and effective library that automatically makes your components responsive in React applications without any manual configuration. By using a Higher-Order Component (HOC), you can easily adapt your UI based on screen size.

Table of Contents

• Installation
• Usage
  • Step 1: Wrap Your App with ResponsiveProvider
  • Step 2: Create a Component
  • Step 3: Use the withResponsive HOC
• Customization
• License

Installation

To install ResponsiveEase, run:

npm install responsiveease

Usage

step-1-wrap-your-app-with-responsiveprovider

import React from 'react';
import ReactDOM from 'react-dom';
import { ResponsiveProvider } from 'responsiveease';
import App from './App';

ReactDOM.render(
  <ResponsiveProvider>
    <App />
  </ResponsiveProvider>,
  document.getElementById('root')
);

step-2-create-a-component

import React from 'react';

const MyComponent = ({ style }) => (
  <div style={style}>This is a responsive component!</div>
);

export default MyComponent;

step-3-use-the-withresponsive-hoc

import React from 'react';
import MyComponent from './MyComponent';
import withResponsive from 'responsiveease';

const ResponsiveMyComponent = withResponsive(MyComponent);

const App = () => (
  <div>
    <ResponsiveMyComponent />
  </div>
);

export default App;

Customization: You can customize the responsive styles by passing a configuration object when using the withResponsive HOC. For example:

const ResponsiveMyComponent = withResponsive(MyComponent, {
  styles: {
    xs: { fontSize: '12px', padding: '8px' },
    sm: { fontSize: '14px', padding: '10px' },
    md: { fontSize: '16px', padding: '12px' },
    lg: { fontSize: '18px', padding: '16px' },
    xl: { fontSize: '20px', padding: '20px' },
  },
});

License This project is licensed under the MIT License - see the LICENSE file for details.