React Responsive Screen

A React utility library for handling responsive design based on screen size. This project simplifies the process of creating responsive components in your React applications.

Features

• Easy-to-use hooks for responsive design.
• Lightweight and fast.
• Customizable breakpoints.
• Works seamlessly with any React project.

Installation

Install the package using npm or yarn:

npm install react-responsive-screen
# or
yarn add react-responsive-screen

Usage

Import and use the provided hooks in your components:

import React from "react";
import { useResponsive } from "react-responsive-screen";

const MyComponent = () => {
  const { isMobile, isTablet, isDesktop } = useResponsive();

  return (
    <div>
      {isMobile && <p>This is displayed on mobile screens.</p>}
      {isTablet && <p>This is displayed on tablet screens.</p>}
      {isDesktop && <p>This is displayed on desktop screens.</p>}
    </div>
  );
};

export default MyComponent;

Configuration

You can customize the breakpoints by wrapping your app with the ResponsiveProvider:

import React from "react";
import { ResponsiveProvider } from "react-responsive-screen";

const App = () => (
  <ScreenProvider>
    <div className="App">
      <h1>React Screen Info Demo</h1>
      <p>Resize your browser to see the values change!</p>
      <MyComponent />
    </div>
  </ScreenProvider>
);

export default App;

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.