responsive-design-library v1.0.1

`# 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.

Table of Contents

• Installation
• Usage
• ResponsiveContainer
• useResponsive
• withResponsive
• Examples
• API
• ResponsiveContainer
• useResponsive
• withResponsive
• Contributing
• Development
• License

Installation

Install the library using npm:

npm install responsive-design-library `

Or with yarn:

bash

Copy code

`yarn add responsive-design-library`

Usage
-----

### ResponsiveContainer

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

javascript

Copy code

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

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.

javascript

Copy code

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

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.

javascript

Copy code

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

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

export default withResponsive(MyComponent);`

Examples
--------

### Example Project

Create an example project to demonstrate how to use the library.

javascript

Copy code

`// example/src/App.js
import React from 'react';
import { ResponsiveContainer, useResponsive, withResponsive } from 'responsive-design-library';

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

const App = () => {
  return (
    <div>
      <h1>Responsive Design Utility Library</h1>
      <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>
      <ResponsiveText />
    </div>
  );
};

export default App;`

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`).

Contributing
------------

We welcome contributions! Please follow these steps to contribute:

1.  Fork the repository.
2.  Create a new branch for your feature or bug fix.
3.  Make your changes and commit them with a clear message.
4.  Push your branch to your forked repository.
5.  Create a pull request to the main repository.

Development
-----------

To set up the project for development:

1.  Clone the repository:

    bash

    Copy code

    `git clone https://github.com/your-username/responsive-design-library.git
    cd responsive-design-library`

2.  Install dependencies:

    bash

    Copy code

    `npm install`

3.  Run the build script:

    bash

    Copy code

    `npm run build`

4.  Run the tests:

    bash

    Copy code

    `npm test`