From 211df7da73440fcdfb51af26303b920419c186b2 Mon Sep 17 00:00:00 2001 From: Valeriy Komlev Date: Fri, 10 Jun 2022 15:27:41 +0200 Subject: [PATCH 1/3] v1.0.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 901fdda..cbaa568 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tiny-use-media", "description": "react hook for getting breakpoints state in runtime", - "version": "1.0.5", + "version": "1.0.6", "browser": "./index.js", "author": { "name": "Valeriy Komlev", From 2ee3b4864a0d257fbd686a7086ae6675b7da6153 Mon Sep 17 00:00:00 2001 From: Valeriy Komlev Date: Fri, 10 Jun 2022 16:59:03 +0200 Subject: [PATCH 2/3] reverting esm module --- README.md | 2 +- index.js | 69 +++++++++++++++++++++++++------------------------- package.json | 14 +++++++++- vite.config.js | 20 +++++++++++++++ 4 files changed, 69 insertions(+), 36 deletions(-) create mode 100644 vite.config.js diff --git a/README.md b/README.md index 5c6a97b..59cd056 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # tiny-use-media -Small (0.5 Kb) react hook for getting media breakpoints state info in runtime +Small (0.7 Kb) react hook for getting media breakpoints state info in runtime ## Usage diff --git a/index.js b/index.js index f23bd8b..2d9dfd0 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,10 @@ -import { useMemo, useState, useEffect } from "react"; +import { useEffect, useMemo, useState } from "react"; + let isClient = typeof window !== "undefined", getCurrent = (queries) => { let index = queries.findIndex((query) => isClient && !query.q.matches), queryIndex = (~index ? index : queries.length) - 1; - return queryIndex >= 0 ? queries[queryIndex].bp : void 0; + return queryIndex >= 0 ? queries[queryIndex].bp : undefined; }, getResult = (queries) => { let current = getCurrent(queries), @@ -14,39 +15,39 @@ let isClient = typeof window !== "undefined", }, {}); res.current = current; return res; - }, - useMedia = (breakpoints) => { - let queries = useMemo( - () => - Object.keys(breakpoints) - .sort((a, b) => +breakpoints[a] - +breakpoints[b]) - .map((bp) => { - let q = isClient - ? window.matchMedia(`(min-width:${breakpoints[bp]}px)`) - : void 0; - return { q, bp }; - }), - Object.values(breakpoints) - ); - let [result, setResult] = useState(getResult(queries)); - useEffect(() => { - let handler = () => setResult(getResult(queries)); + }; + +export let useMedia = (breakpoints) => { + let queries = useMemo( + () => + Object.keys(breakpoints) + .sort((a, b) => +breakpoints[a] - +breakpoints[b]) + .map((bp) => { + let q = isClient + ? window.matchMedia(`(min-width:${breakpoints[bp]}px)`) + : undefined; + return { q, bp }; + }), + Object.values(breakpoints) + ); + let [result, setResult] = useState(getResult(queries)); + useEffect(() => { + let handler = () => setResult(getResult(queries)); + queries.forEach((query) => { + try { + query.q.addEventListener("change", handler); + } catch (e) { + query.q.addListener(handler); + } + }); + return () => queries.forEach((query) => { try { - query.q.addEventListener("change", handler); - } catch (err) { - query.q.addListener(handler); + query.q.removeEventListener("change", handler); + } catch (e) { + query.q.removeListener(handler); } }); - return () => - queries.forEach((query) => { - try { - query.q.removeEventListener("change", handler); - } catch (err) { - query.q.removeListener(handler); - } - }); - }, [queries]); - return result; - }; -export { useMedia }; + }, [queries]); + return result; +}; diff --git a/package.json b/package.json index cbaa568..64675b1 100644 --- a/package.json +++ b/package.json @@ -2,12 +2,22 @@ "name": "tiny-use-media", "description": "react hook for getting breakpoints state in runtime", "version": "1.0.6", - "browser": "./index.js", + "main": "./dist/useMedia.umd.js", + "module": "./dist/useMedia.es.js", + "files": [ + "dist" + ], "author": { "name": "Valeriy Komlev", "email": "komlev88@gmail.com", "url": "https://komlev.me/" }, + "exports": { + ".": { + "import": "./dist/useMedia.es.js", + "require": "./dist/useMedia.umd.js" + } + }, "repository": { "type": "git", "url": "https://github.com/komlev/tiny-use-media.git" @@ -23,9 +33,11 @@ ], "license": "MIT", "scripts": { + "build": "vite build", "publish": "clean-publish" }, "devDependencies": { + "vite": "^2.9.12", "clean-publish": "^4.0.0" }, "peerDependencies": { diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..896bd3c --- /dev/null +++ b/vite.config.js @@ -0,0 +1,20 @@ +const path = require("path"); +const { defineConfig } = require("vite"); + +module.exports = defineConfig({ + build: { + lib: { + entry: path.resolve(__dirname, "index.js"), + name: "useMedia", + fileName: (format) => `useMedia.${format}.js`, + }, + rollupOptions: { + external: ["react"], + output: { + globals: { + react: "React", + }, + }, + }, + }, +}); From ec74da87f10dcedf08604595c9e6e90a0fe0c884 Mon Sep 17 00:00:00 2001 From: Valeriy Komlev Date: Fri, 10 Jun 2022 17:09:59 +0200 Subject: [PATCH 3/3] update README --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 59cd056..8d81bd9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # tiny-use-media -Small (0.7 Kb) react hook for getting media breakpoints state info in runtime +Small (0.6 Kb) react hook for getting media breakpoints state info in runtime ## Usage @@ -66,6 +66,14 @@ E.g. output for screen size of 900px } ``` +## ESM +If you need ESM module it can be found here +[here](https://github.com/komlev/tiny-use-media-esm) +or installed with +``` +npm i tiny-use-media-esm --save +``` + ## License MIT