responsive-design

Responsive Design Utility Library

A React library providing components and hooks to easily manage responsive design. This library helps developers create responsive layouts without writing extensive CSS media queries.

Installation

Install the library using npm:

npm install responsive-design

Or with yarn

yarn add responsive-design

Usage

ResponsiveContainer

A component that renders different children based on the screen size.

import React from 'react';
import { ResponsiveContainer } from 'responsive-design';

const App = () => {
  return (
    <ResponsiveContainer>
      {{
        small: <div>This is small screen content</div>,
        medium: <div>This is medium screen content</div>,
        large: <div>This is large screen content</div>
      }}
    </ResponsiveContainer>
  );
};

export default App;

useResponsive

A hook to get the current screen size and update it on resize.

import React from 'react';
import { useResponsive } from 'responsive-design';

const MyComponent = () => {
  const { screenSize } = useResponsive();

  return <div>Current screen size: {screenSize}</div>;
};

export default MyComponent;

withResponsive

A higher-order component (HOC) to inject responsive props into any component.

import React from 'react';
import { withResponsive } from 'responsive-design';

const MyComponent = ({ screenSize }) => {
  return <div>Current screen size: {screenSize}</div>;
};

export default withResponsive(MyComponent);

API

ResponsiveContainer

A component that renders different children based on the screen size.

Props:

children:

An object containing the components to render for each screen size (small, medium, large).

useResponsive

A hook that returns the current screen size.

Returns:

screenSize:

A string representing the current screen size (small, medium, large).

withResponsive

A higher-order component (HOC) that injects responsive props into any component.

Props Injected:

screenSize:

A string representing the current screen size (small, medium, large).

License

This project is licensed under the MIT License. See the LICENSE file for more details.