useScreenDetector Hook

Overview

useScreenDetector is a custom React hook that helps you determine the current screen size and orientation (landscape or portrait) based on predefined breakpoints. It is designed to be used for responsive web development, where you need to handle different screen sizes like mobile, tablet, and desktop.

The hook allows you to dynamically adjust UI elements based on the screen size and orientation.

Installation

You can install the package via npm:

npm install @nimibyte/screen-detector-hook

Or via yarn:

yarn add @nimibyte/screen-detector-hook

Usage

Example

Here’s how to use the useScreenDetector hook:

import React from 'react';
import { useScreenDetector } from '@nimibyte/use-screen-detector';

const MyComponent = () => {
  const { screen, landscape } = useScreenDetector({
    breakpoints: {
      mobile: 400,
      tablet: 768,
      desktop: 1024,
    },
  });

  return (
    <div>
      <p>Current screen size: {screen}</p>
      <p>Landscape: {landscape ? 'Yes' : 'No'}</p>
    </div>
  );
};

export default MyComponent;

Hook API

useScreenDetector(options):

Parameters:

•	options: An object containing the breakpoints for different screen sizes.
•	breakpoints: Object with keys as screen types (mobile, tablet, desktop) and values as width breakpoints in pixels.

Returns: An object containing:

•	screen: The current screen type based on the breakpoints (mobile, tablet, desktop).
•	landscape: A boolean value indicating if the current orientation is landscape (true) or portrait (false).

Contribution

Feel free to open issues or submit pull requests if you’d like to improve the hook or add new features. Contributions are always welcome!

License

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