react-mobile-viewport 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,270 @@
+# react-mobile-viewport
+
+SSR-safe React hooks that tell you whether the viewport is mobile, tablet, or desktop. Built for **React 18+** and **Next.js App Router**.
+
+It uses CSS `matchMedia` (not user-agent sniffing) and React’s `useSyncExternalStore`, so server HTML and the first client render stay in sync.
+
+## Why this approach
+
+| Approach | Use it? | Why |
+| --- | --- | --- |
+| `window.matchMedia('(max-width: 767px)')` | Yes | Same source of truth as CSS. Updates only when the breakpoint is crossed. |
+| `window.innerWidth` on every resize | Only if you need exact pixels | Extra renders. Still fine behind `useViewportSize`. |
+| User-Agent parsing | Avoid as the primary signal | Tablets, “Request Desktop Site”, and privacy features make it unreliable. |
+| CSS `@media` only | Best for layout | JS should switch *behavior*, not duplicate your entire layout. |
+
+**Hydration rule:** the value rendered on the server must match the first client render. This package does that with `useSyncExternalStore` and an explicit SSR fallback (`false` / `"desktop"` unless you pass a cookie-based hint).
+
+## Install (after you publish)
+
+```bash
+npm install react-mobile-viewport
+```
+
+Peer dependencies: `react` and `react-dom` >= 18.
+
+## Usage
+
+### React (client)
+
+```tsx
+import { useIsMobile } from "react-mobile-viewport";
+
+export function Nav() {
+  const isMobile = useIsMobile();
+
+  return isMobile ? <MobileMenu /> : <DesktopMenu />;
+}
+```
+
+Custom breakpoint (widths **below** 1024px count as mobile):
+
+```tsx
+const isMobile = useIsMobile({ breakpoint: 1024 });
+```
+
+### Breakpoints
+
+Default: mobile `< 768`, tablet `768–1023`, desktop `>= 1024`.
+
+```tsx
+import { useBreakpoint } from "react-mobile-viewport";
+
+export function LayoutSwitch() {
+  const { isMobile, isTablet, isDesktop, breakpoint } = useBreakpoint();
+  return <p>{breakpoint}</p>;
+}
+```
+
+### Arbitrary media queries
+
+```tsx
+import { useMediaQuery } from "react-mobile-viewport";
+
+const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+const isPortrait = useMediaQuery("(orientation: portrait)");
+```
+
+### Viewport size (only when you need pixels)
+
+```tsx
+import { useViewportSize } from "react-mobile-viewport";
+
+const { width, height } = useViewportSize();
+```
+
+Prefer `useIsMobile` / `useBreakpoint` for UI branching. Size updates on every resize.
+
+### Next.js App Router
+
+Hooks use the DOM, so call them from a **Client Component**:
+
+```tsx
+"use client";
+
+import { useIsMobile } from "react-mobile-viewport";
+
+export function DeviceLabel() {
+  const isMobile = useIsMobile();
+  return <span>{isMobile ? "Mobile" : "Desktop"}</span>;
+}
+```
+
+You can import that component from a Server Component. Do **not** import the hooks directly in a Server Component.
+
+### Optional: avoid a desktop flash on mobile
+
+Without a hint, SSR assumes desktop (`false`). Mobile users may see desktop UI for one frame.
+
+1. Set a cookie before paint with the server-safe helper.
+2. Read it in the root layout and pass it into `ViewportProvider`.
+
+`app/layout.tsx`:
+
+```tsx
+import { cookies } from "next/headers";
+import {
+  getViewportCookieScript,
+  parseViewportCookie,
+} from "react-mobile-viewport/script";
+import { ViewportProvider } from "react-mobile-viewport";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const cookieStore = await cookies();
+  const ssrIsMobile = parseViewportCookie(
+    cookieStore.get("viewport")?.value,
+  );
+
+  return (
+    <html lang="en">
+      <head>
+        <script
+          dangerouslySetInnerHTML={{ __html: getViewportCookieScript() }}
+        />
+      </head>
+      <body>
+        <ViewportProvider ssrIsMobile={ssrIsMobile ?? false}>
+          {children}
+        </ViewportProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+Import `getViewportCookieScript` from `react-mobile-viewport/script`, not the root entry. The root entry is marked `"use client"`.
+
+## API
+
+| Export | Returns | Notes |
+| --- | --- | --- |
+| `useIsMobile({ breakpoint, ssrIsMobile })` | `boolean` | Default breakpoint `768`. |
+| `useBreakpoint({ mobileMaxWidth, tabletMaxWidth, ssrBreakpoint })` | `{ isMobile, isTablet, isDesktop, breakpoint }` | |
+| `useMediaQuery(query, { ssrMatch })` | `boolean` | Primitive hook. |
+| `useViewportSize({ ssrWidth, ssrHeight })` | `{ width, height }` | Resize listener, rAF-batched. |
+| `ViewportProvider` | context | Share breakpoint + SSR defaults. |
+| `getViewportCookieScript()` | `string` | From `/script`. Inline in `<head>`. |
+| `parseViewportCookie(value)` | `boolean \| undefined` | From `/script`. |
+
+Hooks work **without** a provider. The provider is only for shared defaults.
+
+## Local development
+
+```bash
+npm install
+npm test
+npm run build
+```
+
+## Publish to npm — step by step
+
+### 1. Create an npm account
+
+Sign up at [https://www.npmjs.com/signup](https://www.npmjs.com/signup) and enable 2FA.
+
+### 2. Pick a unique name
+
+```bash
+npm view react-mobile-viewport
+```
+
+If that prints package info, the name is taken. Change `"name"` in `package.json`. Scoped names are safer:
+
+```json
+{
+  "name": "@your-name/react-mobile-viewport"
+}
+```
+
+Fill in `"author"`, `"repository"`, and `"homepage"` before you publish.
+
+### 3. Log in
+
+```bash
+npm login
+```
+
+Confirm with:
+
+```bash
+npm whoami
+```
+
+### 4. Verify the tarball
+
+```bash
+npm run build
+npm pack --dry-run
+```
+
+You should see `dist/`, `package.json`, `README.md`, and `LICENSE` — not `src/` or `node_modules/`.
+
+### 5. Publish
+
+Unscoped public package:
+
+```bash
+npm publish --access public
+```
+
+Scoped package (`@your-name/...`) must use `--access public` unless you have a paid org.
+
+`prepublishOnly` already runs typecheck, tests, and build.
+
+### 6. First-time checklist
+
+- [ ] Package name is unique
+- [ ] Version is `0.1.0` (or `1.0.0` when you are ready)
+- [ ] README install command matches the name
+- [ ] `npm pack --dry-run` looks right
+- [ ] You are logged in (`npm whoami`)
+- [ ] 2FA code is ready
+
+### 7. Later versions
+
+Follow [semver](https://semver.org/):
+
+- Bug fix → `0.1.1`
+- New compatible API → `0.2.0`
+- Breaking change → `1.0.0`
+
+```bash
+npm version patch
+npm publish --access public
+```
+
+### 8. Use it in a Next.js app
+
+```bash
+npm install react-mobile-viewport
+```
+
+If you test locally before publishing:
+
+```bash
+npm pack
+# copies a .tgz next to package.json
+cd /path/to/your-next-app
+npm install /path/to/react-mobile-viewport-0.1.0.tgz
+```
+
+## Project layout
+
+```
+src/index.ts              Client entry (hooks + provider)
+src/script.ts             Server-safe cookie helpers
+src/use-is-mobile.ts
+src/use-breakpoint.ts
+src/use-media-query.ts
+src/use-viewport-size.ts
+src/provider.tsx
+tsup.config.ts            Dual ESM + CJS build, "use client" banner
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,158 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/constants.ts
+var DEFAULT_MOBILE_MAX_WIDTH = 768;
+var DEFAULT_TABLET_MAX_WIDTH = 1024;
+var DEFAULT_VIEWPORT_COOKIE = "viewport";
+var defaultConfig = {
+  breakpoint: DEFAULT_MOBILE_MAX_WIDTH,
+  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,
+  ssrIsMobile: false,
+  ssrBreakpoint: "desktop",
+  ssrWidth: 0,
+  ssrHeight: 0
+};
+var ViewportContext = react.createContext(defaultConfig);
+function ViewportProvider({
+  children,
+  breakpoint = defaultConfig.breakpoint,
+  tabletMaxWidth = defaultConfig.tabletMaxWidth,
+  ssrIsMobile = defaultConfig.ssrIsMobile,
+  ssrBreakpoint = ssrIsMobile ? "mobile" : defaultConfig.ssrBreakpoint,
+  ssrWidth = defaultConfig.ssrWidth,
+  ssrHeight = defaultConfig.ssrHeight
+}) {
+  const value = react.useMemo(
+    () => ({
+      breakpoint,
+      tabletMaxWidth,
+      ssrIsMobile,
+      ssrBreakpoint,
+      ssrWidth,
+      ssrHeight
+    }),
+    [breakpoint, tabletMaxWidth, ssrIsMobile, ssrBreakpoint, ssrWidth, ssrHeight]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ViewportContext.Provider, { value, children });
+}
+function useViewportConfig() {
+  return react.useContext(ViewportContext);
+}
+
+// src/media-query.ts
+var subscribeCache = /* @__PURE__ */ new Map();
+function attachMediaListener(mql, onChange) {
+  if (typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }
+  mql.addListener(onChange);
+  return () => mql.removeListener(onChange);
+}
+function getMediaQuerySubscribe(query) {
+  const cached = subscribeCache.get(query);
+  if (cached) return cached;
+  const subscribe = (onStoreChange) => {
+    const mql = window.matchMedia(query);
+    return attachMediaListener(mql, onStoreChange);
+  };
+  subscribeCache.set(query, subscribe);
+  return subscribe;
+}
+function getMediaQuerySnapshot(query) {
+  return window.matchMedia(query).matches;
+}
+function maxWidthQuery(maxWidth) {
+  return `(max-width: ${maxWidth - 1}px)`;
+}
+function betweenWidthQuery(minWidth, maxWidth) {
+  return `(min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px)`;
+}
+function useMediaQuery(query, options = {}) {
+  const ssrMatch = options.ssrMatch ?? false;
+  const subscribe = getMediaQuerySubscribe(query);
+  const getSnapshot = react.useCallback(
+    () => getMediaQuerySnapshot(query),
+    [query]
+  );
+  const getServerSnapshot = react.useCallback(() => ssrMatch, [ssrMatch]);
+  return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/use-breakpoint.ts
+function useBreakpoint(options = {}) {
+  const config = useViewportConfig();
+  const mobileMaxWidth = options.mobileMaxWidth ?? config.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;
+  const tabletMaxWidth = options.tabletMaxWidth ?? config.tabletMaxWidth ?? DEFAULT_TABLET_MAX_WIDTH;
+  const ssrBreakpoint = options.ssrBreakpoint ?? config.ssrBreakpoint;
+  const isMobile = useMediaQuery(maxWidthQuery(mobileMaxWidth), {
+    ssrMatch: ssrBreakpoint === "mobile"
+  });
+  const isTablet = useMediaQuery(
+    betweenWidthQuery(mobileMaxWidth, tabletMaxWidth),
+    { ssrMatch: ssrBreakpoint === "tablet" }
+  );
+  const breakpoint = isMobile ? "mobile" : isTablet ? "tablet" : "desktop";
+  return {
+    isMobile,
+    isTablet,
+    isDesktop: breakpoint === "desktop",
+    breakpoint
+  };
+}
+
+// src/use-is-mobile.ts
+function useIsMobile(options = {}) {
+  const config = useViewportConfig();
+  const breakpoint = options.breakpoint ?? config.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;
+  const ssrIsMobile = options.ssrIsMobile ?? config.ssrIsMobile;
+  return useMediaQuery(maxWidthQuery(breakpoint), { ssrMatch: ssrIsMobile });
+}
+var cachedSize = { width: 0, height: 0 };
+function readSize() {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  if (cachedSize.width !== width || cachedSize.height !== height) {
+    cachedSize = { width, height };
+  }
+  return cachedSize;
+}
+function subscribeToResize(onStoreChange) {
+  let frame = 0;
+  const onResize = () => {
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(onStoreChange);
+  };
+  window.addEventListener("resize", onResize);
+  return () => {
+    cancelAnimationFrame(frame);
+    window.removeEventListener("resize", onResize);
+  };
+}
+function useViewportSize(options = {}) {
+  const config = useViewportConfig();
+  const ssrWidth = options.ssrWidth ?? config.ssrWidth;
+  const ssrHeight = options.ssrHeight ?? config.ssrHeight;
+  const serverSnapshot = react.useMemo(
+    () => ({ width: ssrWidth, height: ssrHeight }),
+    [ssrWidth, ssrHeight]
+  );
+  const getServerSnapshot = react.useCallback(() => serverSnapshot, [serverSnapshot]);
+  return react.useSyncExternalStore(subscribeToResize, readSize, getServerSnapshot);
+}
+
+exports.DEFAULT_MOBILE_MAX_WIDTH = DEFAULT_MOBILE_MAX_WIDTH;
+exports.DEFAULT_TABLET_MAX_WIDTH = DEFAULT_TABLET_MAX_WIDTH;
+exports.DEFAULT_VIEWPORT_COOKIE = DEFAULT_VIEWPORT_COOKIE;
+exports.ViewportProvider = ViewportProvider;
+exports.useBreakpoint = useBreakpoint;
+exports.useIsMobile = useIsMobile;
+exports.useMediaQuery = useMediaQuery;
+exports.useViewportConfig = useViewportConfig;
+exports.useViewportSize = useViewportSize;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/provider.tsx","../src/media-query.ts","../src/use-media-query.ts","../src/use-breakpoint.ts","../src/use-is-mobile.ts","../src/use-viewport-size.ts"],"names":["createContext","useMemo","jsx","useContext","useCallback","useSyncExternalStore"],"mappings":"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","file":"index.cjs","sourcesContent":["export const DEFAULT_MOBILE_MAX_WIDTH = 768;\nexport const DEFAULT_TABLET_MAX_WIDTH = 1024;\nexport const DEFAULT_VIEWPORT_COOKIE = \"viewport\";\n","import { createContext, useContext, useMemo } from \"react\";\nimport {\n  DEFAULT_MOBILE_MAX_WIDTH,\n  DEFAULT_TABLET_MAX_WIDTH,\n} from \"./constants\";\nimport type { ViewportConfig, ViewportProviderProps } from \"./types\";\n\nconst defaultConfig: ViewportConfig = {\n  breakpoint: DEFAULT_MOBILE_MAX_WIDTH,\n  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,\n  ssrIsMobile: false,\n  ssrBreakpoint: \"desktop\",\n  ssrWidth: 0,\n  ssrHeight: 0,\n};\n\nconst ViewportContext = createContext<ViewportConfig>(defaultConfig);\n\nexport function ViewportProvider({\n  children,\n  breakpoint = defaultConfig.breakpoint,\n  tabletMaxWidth = defaultConfig.tabletMaxWidth,\n  ssrIsMobile = defaultConfig.ssrIsMobile,\n  ssrBreakpoint = ssrIsMobile ? \"mobile\" : defaultConfig.ssrBreakpoint,\n  ssrWidth = defaultConfig.ssrWidth,\n  ssrHeight = defaultConfig.ssrHeight,\n}: ViewportProviderProps) {\n  const value = useMemo(\n    (): ViewportConfig => ({\n      breakpoint,\n      tabletMaxWidth,\n      ssrIsMobile,\n      ssrBreakpoint,\n      ssrWidth,\n      ssrHeight,\n    }),\n    [breakpoint, tabletMaxWidth, ssrIsMobile, ssrBreakpoint, ssrWidth, ssrHeight],\n  );\n\n  return (\n    <ViewportContext.Provider value={value}>{children}</ViewportContext.Provider>\n  );\n}\n\nexport function useViewportConfig(): ViewportConfig {\n  return useContext(ViewportContext);\n}\n","type Subscribe = (onStoreChange: () => void) => () => void;\n\nconst subscribeCache = new Map<string, Subscribe>();\n\nfunction attachMediaListener(\n  mql: MediaQueryList,\n  onChange: () => void,\n): () => void {\n  if (typeof mql.addEventListener === \"function\") {\n    mql.addEventListener(\"change\", onChange);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }\n\n  mql.addListener(onChange);\n  return () => mql.removeListener(onChange);\n}\n\nexport function getMediaQuerySubscribe(query: string): Subscribe {\n  const cached = subscribeCache.get(query);\n  if (cached) return cached;\n\n  const subscribe: Subscribe = (onStoreChange) => {\n    const mql = window.matchMedia(query);\n    return attachMediaListener(mql, onStoreChange);\n  };\n\n  subscribeCache.set(query, subscribe);\n  return subscribe;\n}\n\nexport function getMediaQuerySnapshot(query: string): boolean {\n  return window.matchMedia(query).matches;\n}\n\nexport function maxWidthQuery(maxWidth: number): string {\n  return `(max-width: ${maxWidth - 1}px)`;\n}\n\nexport function betweenWidthQuery(minWidth: number, maxWidth: number): string {\n  return `(min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px)`;\n}\n","import { useCallback, useSyncExternalStore } from \"react\";\nimport { getMediaQuerySnapshot, getMediaQuerySubscribe } from \"./media-query\";\nimport type { UseMediaQueryOptions } from \"./types\";\n\nexport function useMediaQuery(\n  query: string,\n  options: UseMediaQueryOptions = {},\n): boolean {\n  const ssrMatch = options.ssrMatch ?? false;\n  const subscribe = getMediaQuerySubscribe(query);\n  const getSnapshot = useCallback(\n    () => getMediaQuerySnapshot(query),\n    [query],\n  );\n  const getServerSnapshot = useCallback(() => ssrMatch, [ssrMatch]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n","import {\n  DEFAULT_MOBILE_MAX_WIDTH,\n  DEFAULT_TABLET_MAX_WIDTH,\n} from \"./constants\";\nimport { betweenWidthQuery, maxWidthQuery } from \"./media-query\";\nimport { useViewportConfig } from \"./provider\";\nimport type { BreakpointName, UseBreakpointOptions } from \"./types\";\nimport { useMediaQuery } from \"./use-media-query\";\n\nexport function useBreakpoint(\n  options: UseBreakpointOptions = {},\n): {\n  isMobile: boolean;\n  isTablet: boolean;\n  isDesktop: boolean;\n  breakpoint: BreakpointName;\n} {\n  const config = useViewportConfig();\n  const mobileMaxWidth =\n    options.mobileMaxWidth ?? config.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;\n  const tabletMaxWidth =\n    options.tabletMaxWidth ?? config.tabletMaxWidth ?? DEFAULT_TABLET_MAX_WIDTH;\n  const ssrBreakpoint = options.ssrBreakpoint ?? config.ssrBreakpoint;\n\n  const isMobile = useMediaQuery(maxWidthQuery(mobileMaxWidth), {\n    ssrMatch: ssrBreakpoint === \"mobile\",\n  });\n  const isTablet = useMediaQuery(\n    betweenWidthQuery(mobileMaxWidth, tabletMaxWidth),\n    { ssrMatch: ssrBreakpoint === \"tablet\" },\n  );\n\n  const breakpoint: BreakpointName = isMobile\n    ? \"mobile\"\n    : isTablet\n      ? \"tablet\"\n      : \"desktop\";\n\n  return {\n    isMobile,\n    isTablet,\n    isDesktop: breakpoint === \"desktop\",\n    breakpoint,\n  };\n}\n","import { DEFAULT_MOBILE_MAX_WIDTH } from \"./constants\";\nimport { maxWidthQuery } from \"./media-query\";\nimport { useViewportConfig } from \"./provider\";\nimport type { UseIsMobileOptions } from \"./types\";\nimport { useMediaQuery } from \"./use-media-query\";\n\nexport function useIsMobile(options: UseIsMobileOptions = {}): boolean {\n  const config = useViewportConfig();\n  const breakpoint = options.breakpoint ?? config.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;\n  const ssrIsMobile = options.ssrIsMobile ?? config.ssrIsMobile;\n\n  return useMediaQuery(maxWidthQuery(breakpoint), { ssrMatch: ssrIsMobile });\n}\n","import { useCallback, useMemo, useSyncExternalStore } from \"react\";\nimport { useViewportConfig } from \"./provider\";\nimport type { UseViewportSizeOptions, ViewportSize } from \"./types\";\n\nlet cachedSize: ViewportSize = { width: 0, height: 0 };\n\nfunction readSize(): ViewportSize {\n  const width = window.innerWidth;\n  const height = window.innerHeight;\n\n  if (cachedSize.width !== width || cachedSize.height !== height) {\n    cachedSize = { width, height };\n  }\n\n  return cachedSize;\n}\n\nfunction subscribeToResize(onStoreChange: () => void): () => void {\n  let frame = 0;\n\n  const onResize = () => {\n    cancelAnimationFrame(frame);\n    frame = requestAnimationFrame(onStoreChange);\n  };\n\n  window.addEventListener(\"resize\", onResize);\n  return () => {\n    cancelAnimationFrame(frame);\n    window.removeEventListener(\"resize\", onResize);\n  };\n}\n\nexport function useViewportSize(\n  options: UseViewportSizeOptions = {},\n): ViewportSize {\n  const config = useViewportConfig();\n  const ssrWidth = options.ssrWidth ?? config.ssrWidth;\n  const ssrHeight = options.ssrHeight ?? config.ssrHeight;\n  const serverSnapshot = useMemo(\n    (): ViewportSize => ({ width: ssrWidth, height: ssrHeight }),\n    [ssrWidth, ssrHeight],\n  );\n  const getServerSnapshot = useCallback(() => serverSnapshot, [serverSnapshot]);\n\n  return useSyncExternalStore(subscribeToResize, readSize, getServerSnapshot);\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const DEFAULT_MOBILE_MAX_WIDTH = 768;
+declare const DEFAULT_TABLET_MAX_WIDTH = 1024;
+declare const DEFAULT_VIEWPORT_COOKIE = "viewport";
+
+type BreakpointName = "mobile" | "tablet" | "desktop";
+interface UseMediaQueryOptions {
+    /** Value used on the server and during hydration. Default: `false`. */
+    ssrMatch?: boolean;
+}
+interface UseIsMobileOptions {
+    /** Widths below this value (px) are mobile. Default: `768`. */
+    breakpoint?: number;
+    /** SSR/hydration fallback. Default: `false`. */
+    ssrIsMobile?: boolean;
+}
+interface UseBreakpointOptions {
+    /** Widths below this value (px) are mobile. Default: `768`. */
+    mobileMaxWidth?: number;
+    /** Widths below this value (px) and not mobile are tablet. Default: `1024`. */
+    tabletMaxWidth?: number;
+    /** SSR/hydration fallback. Default: `"desktop"`. */
+    ssrBreakpoint?: BreakpointName;
+}
+interface ViewportSize {
+    width: number;
+    height: number;
+}
+interface UseViewportSizeOptions {
+    ssrWidth?: number;
+    ssrHeight?: number;
+}
+interface ViewportConfig {
+    breakpoint: number;
+    tabletMaxWidth: number;
+    ssrIsMobile: boolean;
+    ssrBreakpoint: BreakpointName;
+    ssrWidth: number;
+    ssrHeight: number;
+}
+interface ViewportProviderProps extends Partial<ViewportConfig> {
+    children: ReactNode;
+}
+
+declare function ViewportProvider({ children, breakpoint, tabletMaxWidth, ssrIsMobile, ssrBreakpoint, ssrWidth, ssrHeight, }: ViewportProviderProps): react.JSX.Element;
+declare function useViewportConfig(): ViewportConfig;
+
+declare function useBreakpoint(options?: UseBreakpointOptions): {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    breakpoint: BreakpointName;
+};
+
+declare function useIsMobile(options?: UseIsMobileOptions): boolean;
+
+declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;
+
+declare function useViewportSize(options?: UseViewportSizeOptions): ViewportSize;
+
+export { type BreakpointName, DEFAULT_MOBILE_MAX_WIDTH, DEFAULT_TABLET_MAX_WIDTH, DEFAULT_VIEWPORT_COOKIE, type UseBreakpointOptions, type UseIsMobileOptions, type UseMediaQueryOptions, type UseViewportSizeOptions, type ViewportConfig, ViewportProvider, type ViewportProviderProps, type ViewportSize, useBreakpoint, useIsMobile, useMediaQuery, useViewportConfig, useViewportSize };

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const DEFAULT_MOBILE_MAX_WIDTH = 768;
+declare const DEFAULT_TABLET_MAX_WIDTH = 1024;
+declare const DEFAULT_VIEWPORT_COOKIE = "viewport";
+
+type BreakpointName = "mobile" | "tablet" | "desktop";
+interface UseMediaQueryOptions {
+    /** Value used on the server and during hydration. Default: `false`. */
+    ssrMatch?: boolean;
+}
+interface UseIsMobileOptions {
+    /** Widths below this value (px) are mobile. Default: `768`. */
+    breakpoint?: number;
+    /** SSR/hydration fallback. Default: `false`. */
+    ssrIsMobile?: boolean;
+}
+interface UseBreakpointOptions {
+    /** Widths below this value (px) are mobile. Default: `768`. */
+    mobileMaxWidth?: number;
+    /** Widths below this value (px) and not mobile are tablet. Default: `1024`. */
+    tabletMaxWidth?: number;
+    /** SSR/hydration fallback. Default: `"desktop"`. */
+    ssrBreakpoint?: BreakpointName;
+}
+interface ViewportSize {
+    width: number;
+    height: number;
+}
+interface UseViewportSizeOptions {
+    ssrWidth?: number;
+    ssrHeight?: number;
+}
+interface ViewportConfig {
+    breakpoint: number;
+    tabletMaxWidth: number;
+    ssrIsMobile: boolean;
+    ssrBreakpoint: BreakpointName;
+    ssrWidth: number;
+    ssrHeight: number;
+}
+interface ViewportProviderProps extends Partial<ViewportConfig> {
+    children: ReactNode;
+}
+
+declare function ViewportProvider({ children, breakpoint, tabletMaxWidth, ssrIsMobile, ssrBreakpoint, ssrWidth, ssrHeight, }: ViewportProviderProps): react.JSX.Element;
+declare function useViewportConfig(): ViewportConfig;
+
+declare function useBreakpoint(options?: UseBreakpointOptions): {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    breakpoint: BreakpointName;
+};
+
+declare function useIsMobile(options?: UseIsMobileOptions): boolean;
+
+declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;
+
+declare function useViewportSize(options?: UseViewportSizeOptions): ViewportSize;
+
+export { type BreakpointName, DEFAULT_MOBILE_MAX_WIDTH, DEFAULT_TABLET_MAX_WIDTH, DEFAULT_VIEWPORT_COOKIE, type UseBreakpointOptions, type UseIsMobileOptions, type UseMediaQueryOptions, type UseViewportSizeOptions, type ViewportConfig, ViewportProvider, type ViewportProviderProps, type ViewportSize, useBreakpoint, useIsMobile, useMediaQuery, useViewportConfig, useViewportSize };

package/dist/index.js

@@ -0,0 +1,148 @@
+"use client";
+import { createContext, useMemo, useContext, useCallback, useSyncExternalStore } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/constants.ts
+var DEFAULT_MOBILE_MAX_WIDTH = 768;
+var DEFAULT_TABLET_MAX_WIDTH = 1024;
+var DEFAULT_VIEWPORT_COOKIE = "viewport";
+var defaultConfig = {
+  breakpoint: DEFAULT_MOBILE_MAX_WIDTH,
+  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,
+  ssrIsMobile: false,
+  ssrBreakpoint: "desktop",
+  ssrWidth: 0,
+  ssrHeight: 0
+};
+var ViewportContext = createContext(defaultConfig);
+function ViewportProvider({
+  children,
+  breakpoint = defaultConfig.breakpoint,
+  tabletMaxWidth = defaultConfig.tabletMaxWidth,
+  ssrIsMobile = defaultConfig.ssrIsMobile,
+  ssrBreakpoint = ssrIsMobile ? "mobile" : defaultConfig.ssrBreakpoint,
+  ssrWidth = defaultConfig.ssrWidth,
+  ssrHeight = defaultConfig.ssrHeight
+}) {
+  const value = useMemo(
+    () => ({
+      breakpoint,
+      tabletMaxWidth,
+      ssrIsMobile,
+      ssrBreakpoint,
+      ssrWidth,
+      ssrHeight
+    }),
+    [breakpoint, tabletMaxWidth, ssrIsMobile, ssrBreakpoint, ssrWidth, ssrHeight]
+  );
+  return /* @__PURE__ */ jsx(ViewportContext.Provider, { value, children });
+}
+function useViewportConfig() {
+  return useContext(ViewportContext);
+}
+
+// src/media-query.ts
+var subscribeCache = /* @__PURE__ */ new Map();
+function attachMediaListener(mql, onChange) {
+  if (typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }
+  mql.addListener(onChange);
+  return () => mql.removeListener(onChange);
+}
+function getMediaQuerySubscribe(query) {
+  const cached = subscribeCache.get(query);
+  if (cached) return cached;
+  const subscribe = (onStoreChange) => {
+    const mql = window.matchMedia(query);
+    return attachMediaListener(mql, onStoreChange);
+  };
+  subscribeCache.set(query, subscribe);
+  return subscribe;
+}
+function getMediaQuerySnapshot(query) {
+  return window.matchMedia(query).matches;
+}
+function maxWidthQuery(maxWidth) {
+  return `(max-width: ${maxWidth - 1}px)`;
+}
+function betweenWidthQuery(minWidth, maxWidth) {
+  return `(min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px)`;
+}
+function useMediaQuery(query, options = {}) {
+  const ssrMatch = options.ssrMatch ?? false;
+  const subscribe = getMediaQuerySubscribe(query);
+  const getSnapshot = useCallback(
+    () => getMediaQuerySnapshot(query),
+    [query]
+  );
+  const getServerSnapshot = useCallback(() => ssrMatch, [ssrMatch]);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/use-breakpoint.ts
+function useBreakpoint(options = {}) {
+  const config = useViewportConfig();
+  const mobileMaxWidth = options.mobileMaxWidth ?? config.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;
+  const tabletMaxWidth = options.tabletMaxWidth ?? config.tabletMaxWidth ?? DEFAULT_TABLET_MAX_WIDTH;
+  const ssrBreakpoint = options.ssrBreakpoint ?? config.ssrBreakpoint;
+  const isMobile = useMediaQuery(maxWidthQuery(mobileMaxWidth), {
+    ssrMatch: ssrBreakpoint === "mobile"
+  });
+  const isTablet = useMediaQuery(
+    betweenWidthQuery(mobileMaxWidth, tabletMaxWidth),
+    { ssrMatch: ssrBreakpoint === "tablet" }
+  );
+  const breakpoint = isMobile ? "mobile" : isTablet ? "tablet" : "desktop";
+  return {
+    isMobile,
+    isTablet,
+    isDesktop: breakpoint === "desktop",
+    breakpoint
+  };
+}
+
+// src/use-is-mobile.ts
+function useIsMobile(options = {}) {
+  const config = useViewportConfig();
+  const breakpoint = options.breakpoint ?? config.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;
+  const ssrIsMobile = options.ssrIsMobile ?? config.ssrIsMobile;
+  return useMediaQuery(maxWidthQuery(breakpoint), { ssrMatch: ssrIsMobile });
+}
+var cachedSize = { width: 0, height: 0 };
+function readSize() {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  if (cachedSize.width !== width || cachedSize.height !== height) {
+    cachedSize = { width, height };
+  }
+  return cachedSize;
+}
+function subscribeToResize(onStoreChange) {
+  let frame = 0;
+  const onResize = () => {
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(onStoreChange);
+  };
+  window.addEventListener("resize", onResize);
+  return () => {
+    cancelAnimationFrame(frame);
+    window.removeEventListener("resize", onResize);
+  };
+}
+function useViewportSize(options = {}) {
+  const config = useViewportConfig();
+  const ssrWidth = options.ssrWidth ?? config.ssrWidth;
+  const ssrHeight = options.ssrHeight ?? config.ssrHeight;
+  const serverSnapshot = useMemo(
+    () => ({ width: ssrWidth, height: ssrHeight }),
+    [ssrWidth, ssrHeight]
+  );
+  const getServerSnapshot = useCallback(() => serverSnapshot, [serverSnapshot]);
+  return useSyncExternalStore(subscribeToResize, readSize, getServerSnapshot);
+}
+
+export { DEFAULT_MOBILE_MAX_WIDTH, DEFAULT_TABLET_MAX_WIDTH, DEFAULT_VIEWPORT_COOKIE, ViewportProvider, useBreakpoint, useIsMobile, useMediaQuery, useViewportConfig, useViewportSize };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/provider.tsx","../src/media-query.ts","../src/use-media-query.ts","../src/use-breakpoint.ts","../src/use-is-mobile.ts","../src/use-viewport-size.ts"],"names":["useMemo","useCallback","useSyncExternalStore"],"mappings":"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","file":"index.js","sourcesContent":["export const DEFAULT_MOBILE_MAX_WIDTH = 768;\nexport const DEFAULT_TABLET_MAX_WIDTH = 1024;\nexport const DEFAULT_VIEWPORT_COOKIE = \"viewport\";\n","import { createContext, useContext, useMemo } from \"react\";\nimport {\n  DEFAULT_MOBILE_MAX_WIDTH,\n  DEFAULT_TABLET_MAX_WIDTH,\n} from \"./constants\";\nimport type { ViewportConfig, ViewportProviderProps } from \"./types\";\n\nconst defaultConfig: ViewportConfig = {\n  breakpoint: DEFAULT_MOBILE_MAX_WIDTH,\n  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,\n  ssrIsMobile: false,\n  ssrBreakpoint: \"desktop\",\n  ssrWidth: 0,\n  ssrHeight: 0,\n};\n\nconst ViewportContext = createContext<ViewportConfig>(defaultConfig);\n\nexport function ViewportProvider({\n  children,\n  breakpoint = defaultConfig.breakpoint,\n  tabletMaxWidth = defaultConfig.tabletMaxWidth,\n  ssrIsMobile = defaultConfig.ssrIsMobile,\n  ssrBreakpoint = ssrIsMobile ? \"mobile\" : defaultConfig.ssrBreakpoint,\n  ssrWidth = defaultConfig.ssrWidth,\n  ssrHeight = defaultConfig.ssrHeight,\n}: ViewportProviderProps) {\n  const value = useMemo(\n    (): ViewportConfig => ({\n      breakpoint,\n      tabletMaxWidth,\n      ssrIsMobile,\n      ssrBreakpoint,\n      ssrWidth,\n      ssrHeight,\n    }),\n    [breakpoint, tabletMaxWidth, ssrIsMobile, ssrBreakpoint, ssrWidth, ssrHeight],\n  );\n\n  return (\n    <ViewportContext.Provider value={value}>{children}</ViewportContext.Provider>\n  );\n}\n\nexport function useViewportConfig(): ViewportConfig {\n  return useContext(ViewportContext);\n}\n","type Subscribe = (onStoreChange: () => void) => () => void;\n\nconst subscribeCache = new Map<string, Subscribe>();\n\nfunction attachMediaListener(\n  mql: MediaQueryList,\n  onChange: () => void,\n): () => void {\n  if (typeof mql.addEventListener === \"function\") {\n    mql.addEventListener(\"change\", onChange);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }\n\n  mql.addListener(onChange);\n  return () => mql.removeListener(onChange);\n}\n\nexport function getMediaQuerySubscribe(query: string): Subscribe {\n  const cached = subscribeCache.get(query);\n  if (cached) return cached;\n\n  const subscribe: Subscribe = (onStoreChange) => {\n    const mql = window.matchMedia(query);\n    return attachMediaListener(mql, onStoreChange);\n  };\n\n  subscribeCache.set(query, subscribe);\n  return subscribe;\n}\n\nexport function getMediaQuerySnapshot(query: string): boolean {\n  return window.matchMedia(query).matches;\n}\n\nexport function maxWidthQuery(maxWidth: number): string {\n  return `(max-width: ${maxWidth - 1}px)`;\n}\n\nexport function betweenWidthQuery(minWidth: number, maxWidth: number): string {\n  return `(min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px)`;\n}\n","import { useCallback, useSyncExternalStore } from \"react\";\nimport { getMediaQuerySnapshot, getMediaQuerySubscribe } from \"./media-query\";\nimport type { UseMediaQueryOptions } from \"./types\";\n\nexport function useMediaQuery(\n  query: string,\n  options: UseMediaQueryOptions = {},\n): boolean {\n  const ssrMatch = options.ssrMatch ?? false;\n  const subscribe = getMediaQuerySubscribe(query);\n  const getSnapshot = useCallback(\n    () => getMediaQuerySnapshot(query),\n    [query],\n  );\n  const getServerSnapshot = useCallback(() => ssrMatch, [ssrMatch]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n","import {\n  DEFAULT_MOBILE_MAX_WIDTH,\n  DEFAULT_TABLET_MAX_WIDTH,\n} from \"./constants\";\nimport { betweenWidthQuery, maxWidthQuery } from \"./media-query\";\nimport { useViewportConfig } from \"./provider\";\nimport type { BreakpointName, UseBreakpointOptions } from \"./types\";\nimport { useMediaQuery } from \"./use-media-query\";\n\nexport function useBreakpoint(\n  options: UseBreakpointOptions = {},\n): {\n  isMobile: boolean;\n  isTablet: boolean;\n  isDesktop: boolean;\n  breakpoint: BreakpointName;\n} {\n  const config = useViewportConfig();\n  const mobileMaxWidth =\n    options.mobileMaxWidth ?? config.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;\n  const tabletMaxWidth =\n    options.tabletMaxWidth ?? config.tabletMaxWidth ?? DEFAULT_TABLET_MAX_WIDTH;\n  const ssrBreakpoint = options.ssrBreakpoint ?? config.ssrBreakpoint;\n\n  const isMobile = useMediaQuery(maxWidthQuery(mobileMaxWidth), {\n    ssrMatch: ssrBreakpoint === \"mobile\",\n  });\n  const isTablet = useMediaQuery(\n    betweenWidthQuery(mobileMaxWidth, tabletMaxWidth),\n    { ssrMatch: ssrBreakpoint === \"tablet\" },\n  );\n\n  const breakpoint: BreakpointName = isMobile\n    ? \"mobile\"\n    : isTablet\n      ? \"tablet\"\n      : \"desktop\";\n\n  return {\n    isMobile,\n    isTablet,\n    isDesktop: breakpoint === \"desktop\",\n    breakpoint,\n  };\n}\n","import { DEFAULT_MOBILE_MAX_WIDTH } from \"./constants\";\nimport { maxWidthQuery } from \"./media-query\";\nimport { useViewportConfig } from \"./provider\";\nimport type { UseIsMobileOptions } from \"./types\";\nimport { useMediaQuery } from \"./use-media-query\";\n\nexport function useIsMobile(options: UseIsMobileOptions = {}): boolean {\n  const config = useViewportConfig();\n  const breakpoint = options.breakpoint ?? config.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;\n  const ssrIsMobile = options.ssrIsMobile ?? config.ssrIsMobile;\n\n  return useMediaQuery(maxWidthQuery(breakpoint), { ssrMatch: ssrIsMobile });\n}\n","import { useCallback, useMemo, useSyncExternalStore } from \"react\";\nimport { useViewportConfig } from \"./provider\";\nimport type { UseViewportSizeOptions, ViewportSize } from \"./types\";\n\nlet cachedSize: ViewportSize = { width: 0, height: 0 };\n\nfunction readSize(): ViewportSize {\n  const width = window.innerWidth;\n  const height = window.innerHeight;\n\n  if (cachedSize.width !== width || cachedSize.height !== height) {\n    cachedSize = { width, height };\n  }\n\n  return cachedSize;\n}\n\nfunction subscribeToResize(onStoreChange: () => void): () => void {\n  let frame = 0;\n\n  const onResize = () => {\n    cancelAnimationFrame(frame);\n    frame = requestAnimationFrame(onStoreChange);\n  };\n\n  window.addEventListener(\"resize\", onResize);\n  return () => {\n    cancelAnimationFrame(frame);\n    window.removeEventListener(\"resize\", onResize);\n  };\n}\n\nexport function useViewportSize(\n  options: UseViewportSizeOptions = {},\n): ViewportSize {\n  const config = useViewportConfig();\n  const ssrWidth = options.ssrWidth ?? config.ssrWidth;\n  const ssrHeight = options.ssrHeight ?? config.ssrHeight;\n  const serverSnapshot = useMemo(\n    (): ViewportSize => ({ width: ssrWidth, height: ssrHeight }),\n    [ssrWidth, ssrHeight],\n  );\n  const getServerSnapshot = useCallback(() => serverSnapshot, [serverSnapshot]);\n\n  return useSyncExternalStore(subscribeToResize, readSize, getServerSnapshot);\n}\n"]}

package/dist/script.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+// src/constants.ts
+var DEFAULT_MOBILE_MAX_WIDTH = 768;
+var DEFAULT_VIEWPORT_COOKIE = "viewport";
+
+// src/script.ts
+function assertSafeToken(value, label) {
+  if (!/^[A-Za-z0-9_-]+$/.test(value)) {
+    throw new Error(`Invalid ${label}: use only letters, numbers, _ or -`);
+  }
+}
+function parseViewportCookie(value) {
+  if (value === "mobile") return true;
+  if (value === "desktop") return false;
+  return void 0;
+}
+function getViewportCookieScript(options = {}) {
+  const cookieName = options.cookieName ?? DEFAULT_VIEWPORT_COOKIE;
+  const breakpoint = options.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;
+  const maxAgeSeconds = options.maxAgeSeconds ?? 60 * 60 * 24 * 7;
+  assertSafeToken(cookieName, "cookieName");
+  if (!Number.isInteger(breakpoint) || breakpoint <= 0) {
+    throw new Error("breakpoint must be a positive integer");
+  }
+  if (!Number.isInteger(maxAgeSeconds) || maxAgeSeconds <= 0) {
+    throw new Error("maxAgeSeconds must be a positive integer");
+  }
+  return `(function(){try{var v=window.matchMedia("(max-width: ${breakpoint - 1}px)").matches?"mobile":"desktop";document.cookie="${cookieName}="+v+";path=/;max-age=${maxAgeSeconds};samesite=lax";}catch(e){}})();`;
+}
+
+exports.getViewportCookieScript = getViewportCookieScript;
+exports.parseViewportCookie = parseViewportCookie;
+//# sourceMappingURL=script.cjs.map
+//# sourceMappingURL=script.cjs.map

package/dist/script.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/script.ts"],"names":[],"mappings":";;;AAAO,IAAM,wBAAA,GAA2B,GAAA;AAEjC,IAAM,uBAAA,GAA0B,UAAA;;;ACSvC,SAAS,eAAA,CAAgB,OAAe,KAAA,EAAqB;AAC3D,EAAA,IAAI,CAAC,kBAAA,CAAmB,IAAA,CAAK,KAAK,CAAA,EAAG;AACnC,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,QAAA,EAAW,KAAK,CAAA,mCAAA,CAAqC,CAAA;AAAA,EACvE;AACF;AAEO,SAAS,oBACd,KAAA,EACqB;AACrB,EAAA,IAAI,KAAA,KAAU,UAAU,OAAO,IAAA;AAC/B,EAAA,IAAI,KAAA,KAAU,WAAW,OAAO,KAAA;AAChC,EAAA,OAAO,MAAA;AACT;AAEO,SAAS,uBAAA,CACd,OAAA,GAAuC,EAAC,EAChC;AACR,EAAA,MAAM,UAAA,GAAa,QAAQ,UAAA,IAAc,uBAAA;AACzC,EAAA,MAAM,UAAA,GAAa,QAAQ,UAAA,IAAc,wBAAA;AACzC,EAAA,MAAM,aAAA,GAAgB,OAAA,CAAQ,aAAA,IAAiB,EAAA,GAAK,KAAK,EAAA,GAAK,CAAA;AAE9D,EAAA,eAAA,CAAgB,YAAY,YAAY,CAAA;AAExC,EAAA,IAAI,CAAC,MAAA,CAAO,SAAA,CAAU,UAAU,CAAA,IAAK,cAAc,CAAA,EAAG;AACpD,IAAA,MAAM,IAAI,MAAM,uCAAuC,CAAA;AAAA,EACzD;AAEA,EAAA,IAAI,CAAC,MAAA,CAAO,SAAA,CAAU,aAAa,CAAA,IAAK,iBAAiB,CAAA,EAAG;AAC1D,IAAA,MAAM,IAAI,MAAM,0CAA0C,CAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,wDAAwD,UAAA,GAAa,CAAC,CAAA,kDAAA,EAAqD,UAAU,yBAAyB,aAAa,CAAA,+BAAA,CAAA;AACpL","file":"script.cjs","sourcesContent":["export const DEFAULT_MOBILE_MAX_WIDTH = 768;\nexport const DEFAULT_TABLET_MAX_WIDTH = 1024;\nexport const DEFAULT_VIEWPORT_COOKIE = \"viewport\";\n","import {\n  DEFAULT_MOBILE_MAX_WIDTH,\n  DEFAULT_VIEWPORT_COOKIE,\n} from \"./constants\";\n\nexport interface ViewportCookieScriptOptions {\n  cookieName?: string;\n  breakpoint?: number;\n  maxAgeSeconds?: number;\n}\n\nfunction assertSafeToken(value: string, label: string): void {\n  if (!/^[A-Za-z0-9_-]+$/.test(value)) {\n    throw new Error(`Invalid ${label}: use only letters, numbers, _ or -`);\n  }\n}\n\nexport function parseViewportCookie(\n  value: string | undefined | null,\n): boolean | undefined {\n  if (value === \"mobile\") return true;\n  if (value === \"desktop\") return false;\n  return undefined;\n}\n\nexport function getViewportCookieScript(\n  options: ViewportCookieScriptOptions = {},\n): string {\n  const cookieName = options.cookieName ?? DEFAULT_VIEWPORT_COOKIE;\n  const breakpoint = options.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;\n  const maxAgeSeconds = options.maxAgeSeconds ?? 60 * 60 * 24 * 7;\n\n  assertSafeToken(cookieName, \"cookieName\");\n\n  if (!Number.isInteger(breakpoint) || breakpoint <= 0) {\n    throw new Error(\"breakpoint must be a positive integer\");\n  }\n\n  if (!Number.isInteger(maxAgeSeconds) || maxAgeSeconds <= 0) {\n    throw new Error(\"maxAgeSeconds must be a positive integer\");\n  }\n\n  return `(function(){try{var v=window.matchMedia(\"(max-width: ${breakpoint - 1}px)\").matches?\"mobile\":\"desktop\";document.cookie=\"${cookieName}=\"+v+\";path=/;max-age=${maxAgeSeconds};samesite=lax\";}catch(e){}})();`;\n}\n"]}

package/dist/script.d.cts

@@ -0,0 +1,9 @@
+interface ViewportCookieScriptOptions {
+    cookieName?: string;
+    breakpoint?: number;
+    maxAgeSeconds?: number;
+}
+declare function parseViewportCookie(value: string | undefined | null): boolean | undefined;
+declare function getViewportCookieScript(options?: ViewportCookieScriptOptions): string;
+
+export { type ViewportCookieScriptOptions, getViewportCookieScript, parseViewportCookie };

package/dist/script.d.ts

@@ -0,0 +1,9 @@
+interface ViewportCookieScriptOptions {
+    cookieName?: string;
+    breakpoint?: number;
+    maxAgeSeconds?: number;
+}
+declare function parseViewportCookie(value: string | undefined | null): boolean | undefined;
+declare function getViewportCookieScript(options?: ViewportCookieScriptOptions): string;
+
+export { type ViewportCookieScriptOptions, getViewportCookieScript, parseViewportCookie };

package/dist/script.js

@@ -0,0 +1,32 @@
+// src/constants.ts
+var DEFAULT_MOBILE_MAX_WIDTH = 768;
+var DEFAULT_VIEWPORT_COOKIE = "viewport";
+
+// src/script.ts
+function assertSafeToken(value, label) {
+  if (!/^[A-Za-z0-9_-]+$/.test(value)) {
+    throw new Error(`Invalid ${label}: use only letters, numbers, _ or -`);
+  }
+}
+function parseViewportCookie(value) {
+  if (value === "mobile") return true;
+  if (value === "desktop") return false;
+  return void 0;
+}
+function getViewportCookieScript(options = {}) {
+  const cookieName = options.cookieName ?? DEFAULT_VIEWPORT_COOKIE;
+  const breakpoint = options.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;
+  const maxAgeSeconds = options.maxAgeSeconds ?? 60 * 60 * 24 * 7;
+  assertSafeToken(cookieName, "cookieName");
+  if (!Number.isInteger(breakpoint) || breakpoint <= 0) {
+    throw new Error("breakpoint must be a positive integer");
+  }
+  if (!Number.isInteger(maxAgeSeconds) || maxAgeSeconds <= 0) {
+    throw new Error("maxAgeSeconds must be a positive integer");
+  }
+  return `(function(){try{var v=window.matchMedia("(max-width: ${breakpoint - 1}px)").matches?"mobile":"desktop";document.cookie="${cookieName}="+v+";path=/;max-age=${maxAgeSeconds};samesite=lax";}catch(e){}})();`;
+}
+
+export { getViewportCookieScript, parseViewportCookie };
+//# sourceMappingURL=script.js.map
+//# sourceMappingURL=script.js.map

package/dist/script.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/script.ts"],"names":[],"mappings":";AAAO,IAAM,wBAAA,GAA2B,GAAA;AAEjC,IAAM,uBAAA,GAA0B,UAAA;;;ACSvC,SAAS,eAAA,CAAgB,OAAe,KAAA,EAAqB;AAC3D,EAAA,IAAI,CAAC,kBAAA,CAAmB,IAAA,CAAK,KAAK,CAAA,EAAG;AACnC,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,QAAA,EAAW,KAAK,CAAA,mCAAA,CAAqC,CAAA;AAAA,EACvE;AACF;AAEO,SAAS,oBACd,KAAA,EACqB;AACrB,EAAA,IAAI,KAAA,KAAU,UAAU,OAAO,IAAA;AAC/B,EAAA,IAAI,KAAA,KAAU,WAAW,OAAO,KAAA;AAChC,EAAA,OAAO,MAAA;AACT;AAEO,SAAS,uBAAA,CACd,OAAA,GAAuC,EAAC,EAChC;AACR,EAAA,MAAM,UAAA,GAAa,QAAQ,UAAA,IAAc,uBAAA;AACzC,EAAA,MAAM,UAAA,GAAa,QAAQ,UAAA,IAAc,wBAAA;AACzC,EAAA,MAAM,aAAA,GAAgB,OAAA,CAAQ,aAAA,IAAiB,EAAA,GAAK,KAAK,EAAA,GAAK,CAAA;AAE9D,EAAA,eAAA,CAAgB,YAAY,YAAY,CAAA;AAExC,EAAA,IAAI,CAAC,MAAA,CAAO,SAAA,CAAU,UAAU,CAAA,IAAK,cAAc,CAAA,EAAG;AACpD,IAAA,MAAM,IAAI,MAAM,uCAAuC,CAAA;AAAA,EACzD;AAEA,EAAA,IAAI,CAAC,MAAA,CAAO,SAAA,CAAU,aAAa,CAAA,IAAK,iBAAiB,CAAA,EAAG;AAC1D,IAAA,MAAM,IAAI,MAAM,0CAA0C,CAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,wDAAwD,UAAA,GAAa,CAAC,CAAA,kDAAA,EAAqD,UAAU,yBAAyB,aAAa,CAAA,+BAAA,CAAA;AACpL","file":"script.js","sourcesContent":["export const DEFAULT_MOBILE_MAX_WIDTH = 768;\nexport const DEFAULT_TABLET_MAX_WIDTH = 1024;\nexport const DEFAULT_VIEWPORT_COOKIE = \"viewport\";\n","import {\n  DEFAULT_MOBILE_MAX_WIDTH,\n  DEFAULT_VIEWPORT_COOKIE,\n} from \"./constants\";\n\nexport interface ViewportCookieScriptOptions {\n  cookieName?: string;\n  breakpoint?: number;\n  maxAgeSeconds?: number;\n}\n\nfunction assertSafeToken(value: string, label: string): void {\n  if (!/^[A-Za-z0-9_-]+$/.test(value)) {\n    throw new Error(`Invalid ${label}: use only letters, numbers, _ or -`);\n  }\n}\n\nexport function parseViewportCookie(\n  value: string | undefined | null,\n): boolean | undefined {\n  if (value === \"mobile\") return true;\n  if (value === \"desktop\") return false;\n  return undefined;\n}\n\nexport function getViewportCookieScript(\n  options: ViewportCookieScriptOptions = {},\n): string {\n  const cookieName = options.cookieName ?? DEFAULT_VIEWPORT_COOKIE;\n  const breakpoint = options.breakpoint ?? DEFAULT_MOBILE_MAX_WIDTH;\n  const maxAgeSeconds = options.maxAgeSeconds ?? 60 * 60 * 24 * 7;\n\n  assertSafeToken(cookieName, \"cookieName\");\n\n  if (!Number.isInteger(breakpoint) || breakpoint <= 0) {\n    throw new Error(\"breakpoint must be a positive integer\");\n  }\n\n  if (!Number.isInteger(maxAgeSeconds) || maxAgeSeconds <= 0) {\n    throw new Error(\"maxAgeSeconds must be a positive integer\");\n  }\n\n  return `(function(){try{var v=window.matchMedia(\"(max-width: ${breakpoint - 1}px)\").matches?\"mobile\":\"desktop\";document.cookie=\"${cookieName}=\"+v+\";path=/;max-age=${maxAgeSeconds};samesite=lax\";}catch(e){}})();`;\n}\n"]}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "react-mobile-viewport",
+  "version": "0.1.0",
+  "description": "SSR-safe React hooks to detect mobile, tablet, and desktop viewports. Works with Next.js App Router.",
+  "license": "MIT",
+  "author": "Narges Abolhasan",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nargesabolhasan/react-mobile-viewport.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nargesabolhasan/react-mobile-viewport/issues"
+  },
+  "homepage": "https://github.com/nargesabolhasan/react-mobile-viewport#readme",
+  "keywords": [
+    "react",
+    "nextjs",
+    "next",
+    "viewport",
+    "mobile",
+    "media-query",
+    "matchMedia",
+    "ssr",
+    "hooks",
+    "responsive"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./script": {
+      "import": {
+        "types": "./dist/script.d.ts",
+        "default": "./dist/script.js"
+      },
+      "require": {
+        "types": "./dist/script.d.cts",
+        "default": "./dist/script.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json",
+    "prepublishOnly": "npm run typecheck && npm run test && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.20.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  }
+}