@ribbon-studios/react-utils - npm Package Compare versions

Comparing version 4.2.0 to 4.2.1

dist/hooks/index.d.ts

@@ -6,2 +6,3 @@ import { default as classNames } from 'classnames';
 export * from './use-subtle-crypto';
+export * from './use-theme';
 export { classNames };

dist/index.cjs

@@ -62,2 +62,37 @@ "use strict";
 }
+function createThemeHook(options) {
+  const hook = () => {
+    const [mode, setMode] = useLocalStorage("theme", "auto");
+    const [theme, setTheme] = require$$0.useState(createThemeHook.getTheme(mode, options));
+    require$$0.useEffect(() => {
+      if (mode === "auto") {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const listener = (event) => {
+          setTheme(event.matches ? options.dark : options.light);
+        };
+        mediaQuery.addEventListener("change", listener);
+        return () => {
+          mediaQuery.removeEventListener("change", listener);
+        };
+      } else {
+        setTheme(mode);
+      }
+    }, [mode, setTheme]);
+    require$$0.useEffect(() => {
+      document.body.setAttribute("data-theme", theme);
+    }, [theme]);
+    return [mode, setMode, theme];
+  };
+  hook.$modes = [...options.themes, "auto"];
+  return hook;
+}
+((createThemeHook2) => {
+  function getTheme(mode, options) {
+    if (mode === "auto") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? options.dark : options.light;
+    }
+    return mode;
+  }
+  createThemeHook2.getTheme = getTheme;
+})(createThemeHook || (createThemeHook = {}));
 function toArgs(props) {
@@ -81,2 +116,3 @@ if (Array.isArray(props)) return props;
 exports.$useStorage = $useStorage;
+exports.createThemeHook = createThemeHook;
 exports.crypto = subtleCrypto;
@@ -83,0 +119,0 @@ exports.hooked = hooked;

dist/index.js

@@ -61,2 +61,37 @@ import { default as default2 } from "classnames";
 }
+function createThemeHook(options) {
+  const hook = () => {
+    const [mode, setMode] = useLocalStorage("theme", "auto");
+    const [theme, setTheme] = useState(createThemeHook.getTheme(mode, options));
+    useEffect(() => {
+      if (mode === "auto") {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const listener = (event) => {
+          setTheme(event.matches ? options.dark : options.light);
+        };
+        mediaQuery.addEventListener("change", listener);
+        return () => {
+          mediaQuery.removeEventListener("change", listener);
+        };
+      } else {
+        setTheme(mode);
+      }
+    }, [mode, setTheme]);
+    useEffect(() => {
+      document.body.setAttribute("data-theme", theme);
+    }, [theme]);
+    return [mode, setMode, theme];
+  };
+  hook.$modes = [...options.themes, "auto"];
+  return hook;
+}
+((createThemeHook2) => {
+  function getTheme(mode, options) {
+    if (mode === "auto") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? options.dark : options.light;
+    }
+    return mode;
+  }
+  createThemeHook2.getTheme = getTheme;
+})(createThemeHook || (createThemeHook = {}));
 function toArgs(props) {
@@ -77,2 +112,3 @@ if (Array.isArray(props)) return props;
   default2 as classNames,
+  createThemeHook,
   subtleCrypto as crypto,
@@ -79,0 +115,0 @@ hooked,

package.json

 {
   "name": "@ribbon-studios/react-utils",
   "description": "Collection of react utilities curated by the Ribbon Studios Team~",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "type": "module",
@@ -6,0 +6,0 @@ "source": "src/*.ts",

README.md

@@ -21,3 +21,3 @@ [![NPM Version][npm-version-image]][npm-url]
   - [`useSessionStorage`](#usesessionstorage)
-  - [`useTheme`](#usetheme)
+  - [`createThemeHook`](#createthemehook)
 - [React Router](#react-router)
@@ -24,0 +24,0 @@ - [`useLoaderData`](#useloaderdata)

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57962

4.48%

Lines of code

1118

6.99%

No dependency changes