@parksuhyun9321/use-media-query 1.0.1 → 1.0.3

package/README.MD

@@ -0,0 +1,6 @@
+# @parksuhyun9321/use-media-query
+
+## 반응형 커스텀 훅 
+
+- useMediaQuery 선언 시 maxWidth 값을 주고 브라우저 사이즈에 따라 isResize 상태를 변경
+- 브라우저 뷰포트에 따른 조건부 렌더링을 위해 사용

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+declare const useMediaQuery: (maxWidth: number) => {
+    isResize: boolean;
+};
+
+export { useMediaQuery };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+declare const useMediaQuery: (maxWidth: number) => {
+    isResize: boolean;
+};
+
+export { useMediaQuery };

package/dist/index.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useMediaQuery: () => useMediaQuery
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useMediaQuery.ts
+var import_react = require("react");
+var useMediaQuery = (maxWidth) => {
+  const [isResize, SetIsResize] = (0, import_react.useState)(() => {
+    if (typeof window === "undefined") return true;
+    return window.innerWidth < maxWidth;
+  });
+  function ResizeCallback() {
+    const value = window.innerWidth < maxWidth;
+    SetIsResize((prev) => prev === value ? prev : value);
+  }
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("resize", ResizeCallback);
+    return () => {
+      window.removeEventListener("resize", ResizeCallback);
+    };
+  }, [maxWidth]);
+  return { isResize };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMediaQuery
+});

package/dist/index.mjs

@@ -0,0 +1,22 @@
+// src/useMediaQuery.ts
+import { useEffect, useState } from "react";
+var useMediaQuery = (maxWidth) => {
+  const [isResize, SetIsResize] = useState(() => {
+    if (typeof window === "undefined") return true;
+    return window.innerWidth < maxWidth;
+  });
+  function ResizeCallback() {
+    const value = window.innerWidth < maxWidth;
+    SetIsResize((prev) => prev === value ? prev : value);
+  }
+  useEffect(() => {
+    window.addEventListener("resize", ResizeCallback);
+    return () => {
+      window.removeEventListener("resize", ResizeCallback);
+    };
+  }, [maxWidth]);
+  return { isResize };
+};
+export {
+  useMediaQuery
+};

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@parksuhyun9321/use-media-query",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
-  "main": "index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -13,6 +18,7 @@
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "pnpm tsup"
   }
 }

package/src/index.ts

@@ -1,2 +0,0 @@
-export { useMediaQuery } from "./useMediaQuery";
-

package/src/useMediaQuery.ts

@@ -1,24 +0,0 @@
-import { useEffect, useState } from "react"
-
-export const useMediaQuery = (maxWidth : number) => {
-
-    const [ isResize, SetIsResize ] = useState<boolean>(() => {
-        if(typeof window === "undefined") return true
-        return window.innerWidth < maxWidth
-    });
-
-    function ResizeCallback() {
-        const value = window.innerWidth < maxWidth;
-        SetIsResize(prev => prev === value ? prev : value);
-    }
-
-    useEffect(() => {
-        window.addEventListener("resize", ResizeCallback)
-
-        return () => {
-            window.removeEventListener("resize", ResizeCallback)
-        }
-    }, [maxWidth])
-
-    return {isResize}
-}

package/tsup.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-  external: ["react"]
-})