useResize

Overview

The useResize hook is a custom React hook that provides information about the current screen size and whether the screen is considered mobile or desktop based on responsive breakpoints. It updates dynamically as the window is resized or the orientation changes.

Importing

To use the useResize hook, import it:

import useResize from './path/to/useResize';

Hook Signature

useResize(): Breakpoint

Breakpoint Type

type BreakpointValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

type Breakpoint = {
  value: BreakpointValue;
  isMobile: boolean;
  isDesktop: boolean;
};

Returns

An object of type Breakpoint with the following properties:

• value: A string indicating the current breakpoint (xs, sm, md, lg, xl, or xxl).
• isMobile: A boolean indicating if the current breakpoint is considered mobile (xs, sm, md).
• isDesktop: A boolean indicating if the current breakpoint is considered desktop (lg, xl, xxl).

---

How It Works

1. Initial State:
   • The hook initializes the breakpoint state to { value: 'xs', isMobile: true, isDesktop: false }.
2. Resize Handling:
   • A resize event listener checks the clientWidth of the document element and determines the breakpoint.
3. Breakpoint Assignment:
   • Updates the value, isMobile, and isDesktop properties based on predefined width ranges.
4. Cleanup:
   • Removes the event listeners on resize and orientationchange when the component unmounts.

---

Example Usage

Basic Example

import React from 'react';
import useResize from './path/to/useResize';

const ResponsiveComponent: React.FC = () => {
  const { value, isMobile, isDesktop } = useResize();

  return (
    <div>
      <h1>Current Breakpoint: {value}</h1>
      <p>{isMobile ? 'This is a mobile view.' : 'This is a desktop view.'}</p>
    </div>
  );
};

export default ResponsiveComponent;

Explanation

1. Dynamic Breakpoint Info: The value reflects the current screen size, while isMobile and isDesktop provide additional context.
2. Responsive Display: The content dynamically updates based on the window size.

---

Example with Conditional Styling

import React from 'react';
import useResize from './path/to/useResize';

const StyledComponent: React.FC = () => {
  const { value, isMobile } = useResize();

  const containerStyle = {
    padding: '20px',
    backgroundColor: isMobile ? '#f0f8ff' : '#ffe4e1',
    textAlign: 'center',
  };

  return (
    <div style={containerStyle}>
      <h1>Breakpoint: {value}</h1>
      <p>The styling of this component changes based on the screen size.</p>
    </div>
  );
};

export default StyledComponent;

Explanation

1. Responsive Styling: The isMobile flag is used to conditionally apply styles.
2. Breakpoint Awareness: The displayed content and styles reflect the current screen size.

---

Breakpoint Ranges

Breakpoint	Width Range (px)	Mobile/Desktop
xs	< 576	Mobile
sm	576 - 767	Mobile
md	768 - 991	Mobile
lg	992 - 1199	Desktop
xl	1200 - 1399	Desktop
xxl	>= 1400	Desktop

---

Best Practices

• Debounce Resize Events: For performance optimization, consider debouncing the resize and orientationchange events in larger applications.
• Use Media Queries: Use the value property in combination with CSS for more efficient styling.
• Testing: Test on various devices to ensure the breakpoints align with your design requirements.

---

Notes

• The hook uses window.document.documentElement.clientWidth to determine the viewport width.
• The default breakpoints align with popular frameworks like Bootstrap.

---

Contributing

If you encounter issues or have suggestions for improving the useResize hook, feel free to contribute or report an issue on the repository.