{"id":24908553,"url":"https://github.com/iwebexpert/screen-size-overlay","last_synced_at":"2026-02-11T12:35:34.727Z","repository":{"id":267686456,"uuid":"901947580","full_name":"iwebexpert/screen-size-overlay","owner":"iwebexpert","description":"Displays a real-time screen size overlay using Tailwind CSS breakpoints in React/Next.js, highlighting screen dimensions and nearest breakpoints for easier debugging. Supports presets (Tailwind CSS, Bootstrap, Foundation, Bulma, MUI). Perfect for debugging screen size changes in responsive layouts","archived":false,"fork":false,"pushed_at":"2025-02-07T21:55:05.000Z","size":700,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-17T20:11:51.895Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iwebexpert.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-12-11T16:01:35.000Z","updated_at":"2025-02-08T11:50:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"131cf898-c36d-46ca-9369-37c77c87cfce","html_url":"https://github.com/iwebexpert/screen-size-overlay","commit_stats":null,"previous_names":["iwebexpert/screen-size-overlay"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/iwebexpert/screen-size-overlay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwebexpert%2Fscreen-size-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwebexpert%2Fscreen-size-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwebexpert%2Fscreen-size-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwebexpert%2Fscreen-size-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iwebexpert","download_url":"https://codeload.github.com/iwebexpert/screen-size-overlay/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwebexpert%2Fscreen-size-overlay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29333087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T06:13:03.264Z","status":"ssl_error","status_checked_at":"2026-02-11T06:12:55.843Z","response_time":97,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-02T02:20:29.075Z","updated_at":"2026-02-11T12:35:34.695Z","avatar_url":"https://github.com/iwebexpert.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Screen Size Overlay\n\n\u003e Perfect for debugging screen size changes in responsive layouts.\n\u003e Easy to integrate into any `React` or `Next.js` project.\n\n\u003cp\u003e\n\u003cimg src=\"docs/images/dark.png\" alt=\"Dark Overlay\" /\u003e\n\u003c/p\u003e\n\u003cp\u003e\n\u003cimg src=\"docs/images/custom.png\" alt=\"Custom Overlay\" /\u003e\n\u003c/p\u003e\n\u003cp\u003e\n\u003cimg src=\"docs/images/light.png\" alt=\"Light Overlay\" /\u003e\n\u003c/p\u003e\n\n**Screen Size Overlay** is a lightweight React component that displays the `current screen size` (width and height), shows distances to the previous and next breakpoints. Supports presets (`Tailwind CSS`, `Bootstrap`, `Foundation`, `Bulma`, `MUI`) or fully custom configurations. By default, **screen-size-overlay** uses `Tailwind CSS` breakpoints.\n\nYou can also build a fully custom overlay by using the library’s hooks such as `useWindowSize` and `useBreakpointInfo` to retrieve screen dimensions and breakpoint data.\n\n\u003cp\u003e\n  \u003cimg src=\"docs/images/demo.gif\" alt=\"Overlay Demo\" /\u003e\n\u003c/p\u003e\n\n## 🚀 Key Features\n\n- **Lightweight**: The library is less than **5KB** (gzip). No dependencies.\n- **Framework-Independent**: Pure CSS approach, no specific CSS framework required.\n- **Real-Time Screen Dimensions**: Instantly displays current screen width and height.\n- **Multiple Presets**: Built-in support for `Tailwind CSS`, `Bootstrap (4/5)`, `Foundation`, `Bulma` and `MUI` breakpoints. You can also provide your own `custom breakpoints`.\n- **Theme Options and Dark Mode Support**: Pass either a single theme (for a universal style) or a dual-theme object (light/dark) with various switching modes.\n\n  - `manual`: Toggle light/dark themes via a button.\n  - `scheme`: Follows the OS color scheme (prefers-color-scheme).\n  - `class`: Detects a class (e.g., 'dark') on `\u003chtml\u003e` or `\u003cbody\u003e`.\n\n- **Customizable**: Includes **four** preinstalled theme keywords — `'light'`, `'dark'`, `'lightIndigo'`, and `'darkIndigo'`. If you need other pairs (e.g., `'lightTealTheme'`, `'darkTealTheme'`), import them separately to preserve **tree-shaking**. You can also override container/overlay styles, toggle breakpoint distances, or provide single/dual themes with manual/automatic dark mode switching.\n\n- **Locales and Languages**:\n\n  - `locale` for number formatting (e.g., `en-US`, `ru-RU`, `es-ES`).\n  - `language` for UI translations (`en`, `ru`, `es`).\n\n- **Modes: `visible`, `auto-hide`, `auto-compact`**:\n\n  - `visible`: Always on.\n  - `auto-hide`: Appears on resize, then fades out after displayDuration.\n  - `auto-compact`: Minimal label view, expands on hover or resize.\n\n- **Throttle for Performance**: Limit resize updates with an optional `throttleDelay` (default `100ms`).\n- **Hooks for a Custom Overlay**  \n  Exported hooks like `useWindowSize` and `useBreakpointInfo` let you build **any** custom overlay component, fully independent of the default UI.\n\n## 📦 Installation\n\nInstall the package using your preferred package manager:\n\n```bash\n# Using npm\nnpm install screen-size-overlay\n\n# Using yarn\nyarn add screen-size-overlay\n\n# Using pnpm\npnpm add screen-size-overlay\n\n# Using bun\nbun add screen-size-overlay\n```\n\n## 💻 Using Screen Size Overlay to monitor screen width and height\n\n### Example of using screen-size-overlay with React.js\n\nA simple approach to adding `ScreenSizeOverlay` in a React application:\n\n```tsx\nimport React from 'react'\nimport { ScreenSizeOverlay } from 'screen-size-overlay'\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eWelcome to my App\u003c/h1\u003e\n      {/* Overlay visible only in development */}\n      \u003cScreenSizeOverlay enable={process.env.NODE_ENV === 'development'} /\u003e\n      {/* Or conditionally */}\n      {process.env.NODE_ENV === 'development' \u0026\u0026 \u003cScreenSizeOverlay /\u003e}\n    \u003c/div\u003e\n  )\n}\n```\n\n### Example with React.lazy\n\nIf you want to load the component lazily in a standard React app, you can use `React.lazy`:\n\n```tsx\nimport React, { lazy, Suspense } from 'react'\n\n// Lazy-load the overlay component\nconst ScreenSizeOverlay = lazy(() =\u003e\n  import('screen-size-overlay').then((module) =\u003e ({\n    default: module.ScreenSizeOverlay,\n  }))\n)\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy React App\u003c/h1\u003e\n      \u003cSuspense fallback={\u003cdiv\u003eLoading overlay...\u003c/div\u003e}\u003e\n        {process.env.NODE_ENV === 'development' \u0026\u0026 \u003cScreenSizeOverlay /\u003e}\n      \u003c/Suspense\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n**Note:** Make sure to wrap the lazy-loaded component in a `\u003cSuspense\u003e` boundary to handle the fallback UI while the overlay is being loaded.\n\n### Screen Size Overlay with Next.js\n\nIn a `Next.js` project, you can dynamically load the overlay and display it only in development mode:\n\n```tsx\nimport React from 'react'\nimport dynamic from 'next/dynamic'\n\nconst ScreenSizeOverlay = dynamic(() =\u003e\n  import('screen-size-overlay').then((module) =\u003e module.ScreenSizeOverlay)\n)\n\nexport default function App() {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eYour Application\u003c/h1\u003e\n      {process.env.NODE_ENV === 'development' \u0026\u0026 \u003cScreenSizeOverlay /\u003e}\n    \u003c/\u003e\n  )\n}\n```\n\n## 🎨 Examples: Using a Custom Theme\n\n### Available Themes\n\nThe library provides several `light/dark` theme pairs you can import individually.\nBy default, only the keywords `light`, `dark`, `lightIndigo`, and `darkIndigo` are recognized automatically.\nIf you need other themes (like `lightTealTheme` or `darkPinkTheme`), import them manually.\n\n**Tree shaking** ensures that **only** the themes you actually import are included in your final bundle—unused themes are excluded.\n\n| **Theme Pair** | **Light**          | **Dark**          |\n| -------------- | ------------------ | ----------------- |\n| **Default**    | `lightTheme`       | `darkTheme`       |\n| **Green**      | `lightGreenTheme`  | `darkGreenTheme`  |\n| **Blue**       | `lightBlueTheme`   | `darkBlueTheme`   |\n| **Purple**     | `lightPurpleTheme` | `darkPurpleTheme` |\n| **Orange**     | `lightOrangeTheme` | `darkOrangeTheme` |\n| **Indigo**     | `lightIndigoTheme` | `darkIndigoTheme` |\n| **Teal**       | `lightTealTheme`   | `darkTealTheme`   |\n| **Pink**       | `lightPinkTheme`   | `darkPinkTheme`   |\n| **Red**        | `lightRedTheme`    | `darkRedTheme`    |\n| **Yellow**     | `lightYellowTheme` | `darkYellowTheme` |\n| **Brown**      | `lightBrownTheme`  | `darkBrownTheme`  |\n\n**Note**: If you only import, for example, `lightGreenTheme`, then other themes such as `lightBlueTheme` or `darkTheme` will not be added to your final bundle.\n\n### 1. Single Theme\n\nIf you only have one theme object, simply pass it directly to the theme prop. This theme will be used consistently, and no toggle button will appear (since there’s no second theme to switch to):\n\n```tsx\nimport { ScreenSizeOverlay, darkTealTheme } from 'screen-size-overlay'\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003cScreenSizeOverlay\n        breakpoints=\"tailwind\"\n        // Use a built-in keyword ('light', 'dark', 'lightIndigo', or 'darkIndigo')\n        // theme=\"lightIndigo\"\n        // Single custom theme usage\n        theme={darkTealTheme}\n        mode=\"auto-hide\"\n        displayDuration={3000}\n      /\u003e\n      {/* rest of your application */}\n    \u003c/div\u003e\n  )\n}\n```\n\n### 2. Dual Theme (Light and Dark)\n\nWhen you provide two themes (light and dark), you can enable manual or automatic switching:\n\n```tsx\nimport {\n  ScreenSizeOverlay,\n  darkTealTheme,\n  lightTealTheme,\n} from 'screen-size-overlay'\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003cScreenSizeOverlay\n        // Pass two themes in an object with optional switching modes\n        theme={{\n          light: customLightTealTheme,\n          dark: lightTealTheme,\n          // defaultTheme: 'dark', // Uncomment to start with dark mode\n          switchMode: 'manual', // 'manual' (default), 'scheme', or 'class'\n          // switchModeClassName: 'dark', // If you use switchMode='class'\n        }}\n        breakpoints=\"tailwind\"\n        mode=\"auto-compact\"\n        displayDuration={2000}\n      /\u003e\n      {/* rest of your application */}\n    \u003c/div\u003e\n  )\n}\n```\n\n### 3. Fully Custom Single Theme\n\nIf you want to override or build from a base theme, you can use the provided utilities like mergeTheme:\n\n```tsx\nimport {\n  ScreenSizeOverlay,\n  lightGreenTheme,\n  mergeTheme,\n} from 'screen-size-overlay'\n// Base teal theme\nimport { lightTealTheme } from 'screen-size-overlay'\n\nconst customLightGreenTheme = mergeTheme(lightGreenTheme, {\n  backgroundColor: '#b8fcbd',\n  // fontFamily: 'Arial, sans-serif',\n  // textColor: '#222222',\n  // etc.\n})\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003cScreenSizeOverlay\n        breakpoints=\"tailwind\"\n        // Only one custom theme, no switching\n        theme={customLightGreenTheme}\n        mode=\"visible\"\n      /\u003e\n      {/* rest of your application */}\n    \u003c/div\u003e\n  )\n}\n```\n\nWhen you only pass one theme object (as shown above), the overlay will remain with that theme without offering a light/dark toggle button.\n\n## 🧩 Props\n\n| **Prop**             | **Type**                                                                                                                                                           | **Default**      | **Description**                                                                                                                                                                                                     |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `enable`             | `boolean`                                                                                                                                                          | `true`           | Toggles whether the overlay is rendered. Useful for enabling it only in development.                                                                                                                                |\n| `breakpoints`        | `'tailwind' \\| 'bootstrap' \\| 'bootstrap4' \\| 'bootstrap5' \\| 'foundation' \\| 'bulma' \\| 'mui' \\| Record\u003cstring, number\u003e`                                          | `'tailwind'`     | Determines which breakpoints are used. Can be one of the built-in presets or a custom object (e.g., `{ XS: 0, SM: 640, MD: 768, ... }`).                                                                            |\n| `position`           | `'top-left' \\| 'top-right' \\| 'bottom-left' \\| 'bottom-right' \\| 'relative'`                                                                                       | `'bottom-right'` | Chooses where the overlay is positioned on the screen. If `'relative'`, the overlay is positioned within its parent element.                                                                                        |\n| `locale`             | `string`                                                                                                                                                           | `'en-US'`        | Specifies the locale for number formatting (for displaying width/height). Examples: `'en-US'`, `'ru-RU'`, `'es-ES'`.                                                                                                |\n| `language`           | `'en' \\| 'ru' \\| 'es'`                                                                                                                                             | `'en'`           | Language used for UI text translations within the overlay (e.g., labels for unknown breakpoints, close button text, etc.).                                                                                          |\n| `size`               | `'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| '2xl'`                                                                                                                            | `'lg'`           | Determines the overlay's scale (font size, spacing, etc.).                                                                                                                                                          |\n| `showPrevBreakpoint` | `boolean`                                                                                                                                                          | `true`           | If true, shows the distance to the previous breakpoint.                                                                                                                                                             |\n| `showNextBreakpoint` | `boolean`                                                                                                                                                          | `true`           | If true, shows the distance to the next breakpoint.                                                                                                                                                                 |\n| `showCloseButton`    | `boolean`                                                                                                                                                          | `true`           | Displays (or hides) the close button in the overlay.                                                                                                                                                                |\n| `transparency`       | `number`                                                                                                                                                           | `1`              | Sets the overlay's opacity (0 = fully transparent, 1 = fully opaque).                                                                                                                                               |\n| `containerStyles`    | `React.CSSProperties`                                                                                                                                              | `{}`             | Additional inline styles for the **outer container** of the overlay (e.g., positioning, zIndex). By default, zIndex is set to 1000.                                                                                 |\n| `overlayStyles`      | `React.CSSProperties`                                                                                                                                              | `{}`             | Additional inline styles for the **overlay** element itself (e.g., custom fontSize, padding, etc.).                                                                                                                 |\n| `theme`              | \u003cbr/\u003e **Single theme:** `CustomTheme \\| 'light' \\| 'dark' \\| 'lightIndigo' \\| 'darkIndigo'` \u003cbr/\u003e **Dual theme:** `{ light: CustomTheme; dark: CustomTheme; ... }` | `darkIndigo`     | A single theme object (custom or one of the four built-in keywords) or a dual theme object (light/dark) supporting manual or automatic switching. Allows custom colors, fonts, and more.                            |\n| `mode`               | `'visible' \\| 'auto-hide' \\| 'auto-compact'`                                                                                                                       | `'visible'`      | Controls when the overlay is shown: \u003cbr/\u003e• **`visible`**: Always displayed \u003cbr/\u003e• **`auto-hide`**: Appears on resize, hides after `displayDuration` \u003cbr/\u003e• **`auto-compact`**: Compact view unless hovered/resizing |\n| `displayDuration`    | `number`                                                                                                                                                           | `2000`           | How long (ms) the overlay remains fully visible in `auto-hide` or `auto-compact` modes before hiding or collapsing.                                                                                                 |\n| `throttleDelay`      | `number`                                                                                                                                                           | `100`            | Throttle delay for window resize events (in ms). Limits how often screen size recalculations occur, enhancing performance.                                                                                          |\n\n## 🛠️ Full Customization\n\nBelow is a more detailed example demonstrating the various props:\n\n```tsx\n\u003cScreenSizeOverlay\n  // Controls whether the overlay is visible (default: true).\n  // Useful if you only want the overlay active in development mode.\n  enable={process.env.NODE_ENV === 'development'}\n  //\n  // Breakpoints used to determine the current responsive behavior.\n  // By default, Tailwind CSS breakpoints are used.\n  // You can use one of the presets: 'tailwind', 'bootstrap', 'bootstrap4', 'bootstrap5', 'foundation', 'bulma', 'mui'\n  // or provide custom breakpoints as an object.\n  //\n  breakpoints=\"tailwind\"\n  // Example of custom breakpoints:\n  // breakpoints={{\n  //   XS: 0,\n  //   SM: 640,\n  //   MD: 768,\n  //   LG: 1024,\n  //   XL: 1280,\n  //   '2XL': 1536,\n  // }}\n  //\n  // An optional throttle delay (in ms), defaulting to 100.\n  // This limits the frequency of window size updates during resize events.\n  // throttleDelay={100}\n  //\n  // Locale for number formatting (e.g., width and height). Default is 'en-US'.\n  // Examples: 'en-US', 'ru-RU', 'es-ES'.\n  locale=\"en-US\"\n  //\n  // Language for UI translations within the overlay. Options: 'en', 'ru', 'es'.\n  // Default is 'en'.\n  language=\"en\"\n  //\n  // Position of the overlay on the screen: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative' (by default 'bottom-right')\n  position=\"bottom-right\"\n  //\n  // Size of the overlay: 'sm' | 'md' | 'lg' | 'xl'| '2xl' (default: 'lg')\n  size=\"lg\"\n  //\n  // If true, displays distance to the previous breakpoint (default: true)\n  showPrevBreakpoint={true}\n  //\n  // If true, displays distance to the next breakpoint (default: true)\n  showNextBreakpoint={true}\n  //\n  // If false, hides the close button in the overlay (default: true)\n  showCloseButton={true}\n  //\n  // Transparency level of the overlay.\n  // A value between 0 (fully transparent) and 1 (fully opaque). Default is 1\n  transparency={0.95}\n  //\n  // Theme configuration for the overlay.\n  // This can be:\n  // 1. A single CustomTheme object (universal theme),\n  // 2. A dual theme object { light, dark, switchMode, switchModeClassName }\n  //    allowing manual or auto switching between light and dark modes.\n  //\n  // switchMode (default: 'manual'):\n  //   - 'manual': Manually toggle between light and dark themes via a button (if two themes exist).\n  //   - 'scheme': Automatically detects the user's OS color scheme (prefers-color-scheme).\n  //   - 'class': Detects a class (by default 'dark') on \u003chtml\u003e or \u003cbody\u003e to decide if dark mode is active.\n  // switchModeClassName (optional):\n  //   - If switchMode is 'class', you can specify a custom class here. Defaults to 'dark' if omitted.\n  theme={{\n    light: customLightTealTheme,\n    dark: darkTealTheme,\n    // defaultTheme: 'dark', // Use if you'd like to start with the dark theme\n    switchMode: 'manual',\n\n    // switchMode: 'class',\n    // switchModeClassName: 'dark',\n  }}\n  //\n  // If you only have a single theme object, simply pass it directly:\n  // The overlay will always use that theme and won't provide a toggle button.\n  // theme=\"light\" // light, dark, lightIndigo and darkIndigo are built-in presets.\n  // theme={darkTealTheme}\n  //\n  // Example of a fully customized theme:\n  // theme={{\n  //   backgroundColor: '#005204', // Overlay background color\n  //   borderColor: '#032b00', // Overlay border color\n  //   textColor: '#ffffff', // Overlay text color\n  //   separatorColor: '#2e7400', // Color for separators between displayed info\n  //   closeButtonColor: '#2e7400', // Color for the close button (if showCloseButton=true)\n  //   fontFamily: 'Arial, sans-serif', // Font family for all text in the overlay\n  // }}\n  //\n  // Custom container styles.\n  // These styles are applied to the outer container of the overlay and can be used to override the default positioning and z-index.\n  // By default, z-index is set to 1000.\n  containerStyles={{ zIndex: 1000, bottom: 16, right: 16 }}\n  //\n  // Custom overlay styles.\n  // These styles are applied directly to the overlay element, allowing further customization (e.g., font size, padding).\n  // overlayStyles={{ fontSize: '10px' }}\n  //\n  // Overlay display mode:\n  //  'visible': always visible,\n  //  'auto-hide': appears on resize, then hides after displayDuration,\n  //  'auto-compact': only shows the breakpoint label unless hovered (or resizing).\n  // Default is 'visible'.\n  // mode=\"auto-compact\"\n  //\n  // The time in milliseconds the overlay remains visible in 'auto-hide' and 'auto-compact' modes.\n  // Default is 2000 ms.\n  // displayDuration={2000}\n/\u003e\n```\n\n## Build your own Overlay using hooks\n\nBelow is an example of using the exported hooks `useWindowSize` and `useBreakpointInfo` to create your own custom overlay instead of relying on the built-in `ScreenSizeOverlay` component.\n\n```tsx\nimport React from 'react'\nimport { useWindowSize, useBreakpointInfo } from 'screen-size-overlay'\n\nexport default function CustomOverlay() {\n  // Throttled window size updates every 125ms\n  const displaySize = useWindowSize(125)\n\n  // Provides current breakpoint info (Tailwind by default)\n  const {\n    currentBreakpoint,\n    distanceToPrev,\n    distanceToNext,\n    breakpointKeys,\n    prevBreakpointKeyOrLabel,\n    nextBreakpointKeyOrLabel,\n  } = useBreakpointInfo(displaySize.width, 'tailwind')\n\n  return (\n    \u003cdiv\n      style={{\n        position: 'fixed',\n        bottom: 10,\n        right: 10,\n        padding: '10px',\n        background: 'rgba(0,0,0,0.7)',\n        color: 'white',\n        borderRadius: '5px',\n      }}\u003e\n      \u003cp\u003eWidth: {displaySize.width}px\u003c/p\u003e\n      \u003cp\u003eHeight: {displaySize.height}px\u003c/p\u003e\n      \u003cp\u003eAll Breakpoints: {breakpointKeys.join(', ')}\u003c/p\u003e\n      \u003cp\u003eCurrent Breakpoint: {currentBreakpoint}\u003c/p\u003e\n      \u003cp\u003e\n        Prev Breakpoint: {prevBreakpointKeyOrLabel ?? 'N/A'}\n        {distanceToPrev !== null ? ` (${distanceToPrev}px)` : ''}\n      \u003c/p\u003e\n      \u003cp\u003e\n        Next Breakpoint: {nextBreakpointKeyOrLabel ?? 'N/A'}\n        {distanceToNext !== null ? ` (${distanceToNext}px)` : ''}\n      \u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## ⚡ Why use screen-size-overlay instead of a Browser Extension?\n\nEven though the screen size overlay typically runs only in development mode, including it as part of your codebase (instead of relying on a browser extension) offers several key benefits:\n\n1. **Consistent Dev Environment**  \n   With `screen-size-overlay`, every developer sees the same overlay across different machines and browsers, ensuring consistent debugging. Extensions can vary in availability or version, leading to inconsistent testing if each team member has a different setup.\n\n2. **Advanced Customization \u0026 Theming**  \n   The overlay is fully configurable through props—letting you define custom breakpoints, themes, and styles. Browser extensions generally provide fixed functionality or limited options, making it difficult to adapt them to specific project needs.\n\n3. **Controlled Integration \u0026 Version Tracking**  \n   By adding the overlay to your repository, all changes are documented via version control, making it easy to roll back or see when new features were added. Although you might only enable it in development builds, the code remains part of your project’s lifecycle, ensuring updates or configuration changes are transparent to the whole team. Perfect for debugging screen size changes in responsive layouts.\n\n## 📝 License\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT). Feel free to use screen-size-overlay in your projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiwebexpert%2Fscreen-size-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiwebexpert%2Fscreen-size-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiwebexpert%2Fscreen-size-overlay/lists"}