#117 Add useScreenSize() Hook for Responsive Breakpoint Detection with Type Support

[jawad-ali786]

📝 Description

useScreenSize() that enables responsive breakpoint detection in a type-safe manner using TypeScript. It simplifies working with responsive UI by allowing developers to easily check the current screen size and compare it against standard Tailwind-style breakpoints.

📐 Breakpoint Table

Breakpoint	Range
xs	0px - 639px
sm	640px - 767px
md	768px - 1023px
lg	1024px - 1279px
xl	1280px - 1535px
2xl	1536px and up

---

🧩 Hook API

const screenSize = useScreenSize();

screenSize.equals("md");      // true/false
screenSize.lessThan("lg");    // true/false
screenSize.greaterThan("sm"); // true/false
screenSize.toString();        // "xs" | "sm" | "md" | "lg" | "xl" | "2xl"

[Copilot]

Pull Request Overview

This pull request introduces the new useScreenSize() hook to enable responsive breakpoint detection in a type-safe way for TypeScript projects. The main changes include:

• Adding the useScreenSize() hook implementation in lib/hooks/useScreenSize.ts.
• Exporting useScreenSize() from lib/index.ts.
• Updating documentation and a demo to showcase the new hook.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
lib/index.ts	Export of the new useScreenSize() hook added
lib/hooks/useScreenSize.ts	Implementation of useScreenSize() with breakpoint detection
docs/docs/hooks/useScreenSize.mdx	Documentation and usage examples for the hook added
docs/demo/UseScreenSizeDemo.jsx	Demo component for showcasing useScreenSize() functionality
docs/README.md	README updated with an entry for the new useScreenSize() hook

Comments suppressed due to low confidence (1)

docs/README.md:136

• The line contains several typos: 'breakponint' should be 'breakpoint' and 'euqals' should be 'equals'. Consider rephrasing for clarity.

- [`useScreenSize()`](https://reacthaiku.dev/docs/hooks/useScreenSize) - Provide the breakponit values in string method `toString`  with other method `euqals` , `lessThan` , `greaterThan` value in `True/False`.

[DavidHDev]

Is there anything different on this PR VS the one you opened 4 days ago? Please close one of them

[jawad-ali786]

close one PR and remove extra lines from index.ts

…

On Mon, Jun 9, 2025 at 10:59 PM David ***@***.***> wrote: *DavidHDev* left a comment (DavidHDev/haiku#124) <#124 (comment)> Is there anything different on this PR VS the one you opened 4 days ago? Please close one of them — Reply to this email directly, view it on GitHub <#124 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANV5T6EBGAFBKQX2FI53PJT3CXDPDAVCNFSM6AAAAAB5ATES6CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNJWGUZDQNZWGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>