@peachy/hooks 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @peachy/hooks
 
+## 0.0.9
+
+## 0.0.8
+
+### Patch Changes
+
+- e8ee4a7: Add new hooks: `useNetworkMonitor` and `useSetting`
+
 ## 0.0.7
 
 ## 0.0.6

package/README.md

@@ -1,3 +1,94 @@
 # @peachy/hooks
 
 Useful hooks for React applications.
+
+## Installation
+
+```bash
+npm install @peachy/hooks
+```
+
+## Usage
+
+There are different categories of hooks you can use:
+
+### Gio
+
+#### `useNetworkMonitor`
+
+Returns information about the network connection.
+
+```tsx
+import { useNetworkMonitor } from "@peachy/hooks";
+
+const App = () => {
+  const { connected } = useNetworkMonitor();
+
+  return (
+    <Gtk.Label>
+      {connected ? "Connected" : "Disconnected"}
+    </Gtk.Label>
+  );
+};
+```
+
+Provided values:
+
+- `connected`: A boolean indicating whether the device is connected to _internet_.
+- `available`: A boolean indicating whether this internet is connected to any network like WiFI, mobile data, ethernet, etc. This does not mean that it can access the internet.
+- `state`: The type of connectivity. One of `local`, `limited`, `portal`, and `full`. Check https://gjs-docs.gnome.org/gio20~2.0/gio.networkconnectivity to learn more.
+- `metered`: A boolean indicating whether the device is metered. When `true`, the device is metered, meaning that the user is charged for data usage and bandwidth is limited.
+
+#### `useSetting`
+
+Get the value of a setting while listening for changes, and change gsettings.
+
+```tsx
+import { useSetting } from "@peachy/hooks";
+
+const App = () => {
+  const [value, changeValue] = useSetting("org.gnome.desktop.interface", "gtk-theme");
+
+  return (
+    <Gtk.Box>
+      <Gtk.Label>
+        Theme: {value}
+      </Gtk.Label>
+      <Gtk.Button onClick={() => changeValue("Adwaita-dark")}>
+        Change Theme
+      </Gtk.Button>
+    </Gtk.Box>
+  );
+};
+```
+
+### GObject
+
+#### `useBinding`
+
+Bind to a property, and listen for changes.
+
+```tsx
+import Adw from "gi://Adw?version=1";
+
+import { useBinding } from "@peachy/hooks";
+
+const App = () => {
+  const styleManager = Adw.StyleManager.get_default();
+
+  const [darkMode] = useBinding(styleManager, "dark");
+  const [accentColor] = useBinding(styleManager, "accentColor");
+
+  return (
+    <Gtk.Box>
+      <Gtk.Label>
+        Theme: {darkMode ? "Dark" : "Light"}
+      </Gtk.Label>
+      
+      <Gtk.Label>
+        Accent Color: {accentColor}
+      </Gtk.Label>
+    </Gtk.Box>
+  );
+};
+```

package/dist/base/index.d.mts

@@ -0,0 +1,2 @@
+import { useReference } from "./use-reference.mjs";
+export { useReference };

package/dist/base/index.mjs

@@ -0,0 +1,3 @@
+import { useReference } from "./use-reference.mjs";
+
+export { useReference };

package/dist/base/use-reference.d.mts

@@ -0,0 +1,9 @@
+import { RefObject } from "react";
+
+//#region src/base/use-reference.d.ts
+/**
+ * Returns the value inside a `ref`, correctly checking it after the initial render
+ */
+declare function useReference<T>(value: T | RefObject<T>, defaultValue?: T): T | null;
+//#endregion
+export { useReference };

package/dist/base/use-reference.mjs

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+//#region src/base/use-reference.ts
+/**
+* Returns the value inside a `ref`, correctly checking it after the initial render
+*/
+function useReference(value, defaultValue) {
+	const [result, setResult] = useState(() => {
+		return getValue(value) ?? (defaultValue || null);
+	});
+	useEffect(() => {
+		setResult(getValue(value));
+	}, [value]);
+	return result;
+}
+function getValue(object) {
+	return isRef(object) ? object.current : object;
+}
+function isRef(object) {
+	return typeof object === "object" && object !== null && "current" in object;
+}
+
+//#endregion
+export { useReference };

package/dist/gio/index.d.mts

@@ -0,0 +1,3 @@
+import { useNetworkMonitor } from "./use-network-monitor.mjs";
+import { useSetting } from "./use-setting.mjs";
+export { useNetworkMonitor, useSetting };

package/dist/gio/index.mjs

@@ -0,0 +1,4 @@
+import { useNetworkMonitor } from "./use-network-monitor.mjs";
+import { useSetting } from "./use-setting.mjs";
+
+export { useNetworkMonitor, useSetting };

package/dist/gio/use-network-monitor.d.mts

@@ -0,0 +1,12 @@
+import Gio from "gi://Gio?version=2.0";
+
+//#region src/gio/use-network-monitor.d.ts
+interface NetworkMonitor {
+  connected: boolean;
+  state: Gio.NetworkConnectivity;
+  metered: boolean;
+  available: boolean;
+}
+declare function useNetworkMonitor(): NetworkMonitor;
+//#endregion
+export { useNetworkMonitor };

package/dist/gio/use-network-monitor.mjs

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from "react";
+import Gio from "gi://Gio?version=2.0";
+
+//#region src/gio/use-network-monitor.ts
+function useNetworkMonitor() {
+	const monitor = Gio.NetworkMonitor.get_default();
+	const [state, setState] = useState(() => calculateState());
+	const calculateState = useCallback(() => {
+		return {
+			available: monitor.network_available,
+			connected: monitor.connectivity === Gio.NetworkConnectivity.FULL,
+			state: monitor.connectivity,
+			metered: monitor.network_metered
+		};
+	}, []);
+	useEffect(() => {
+		const id = monitor.connect("network-changed", () => {
+			setState(calculateState());
+		});
+		return () => {
+			monitor.disconnect(id);
+		};
+	}, []);
+	return state;
+}
+
+//#endregion
+export { useNetworkMonitor };

package/dist/gio/use-setting.d.mts

@@ -0,0 +1,6 @@
+import GLib from "gi://GLib?version=2.0";
+
+//#region src/gio/use-setting.d.ts
+declare function useSetting<T = unknown>(schema: string, key: string): [T, (newValue: GLib.Variant) => void];
+//#endregion
+export { useSetting };

package/dist/gio/use-setting.mjs

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import Gio from "gi://Gio?version=2.0";
+
+//#region src/gio/use-setting.ts
+function useSetting(schema, key) {
+	const settings = Gio.Settings.new(schema);
+	const getValue = () => settings.get_value(key).recursiveUnpack();
+	const [value, setValue] = useState(() => getValue());
+	useEffect(() => {
+		const handler = settings.connect("changed::" + key, () => {
+			setValue(getValue());
+		});
+		return () => settings.disconnect(handler);
+	}, [settings, key]);
+	const changeValue = (newValue) => {
+		settings.set_value(key, newValue);
+	};
+	return [value, changeValue];
+}
+
+//#endregion
+export { useSetting };

package/dist/gobject/use-binding.d.mts

@@ -3,7 +3,7 @@ import GObject from "gi://GObject?version=2.0";
 
 //#region src/gobject/use-binding.d.ts
 type NonFunctionKeys<T> = { [K in keyof T]: T[K] extends Function ? never : K extends Symbol ? never : K extends number ? never : K }[keyof T];
-declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>>(object: T | RefObject<T>, property: Prop, defaultValue?: T[Prop], converter?: undefined): T[Prop];
-declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>, Converter extends (value: T[Prop]) => any>(object: T | RefObject<T>, property: Prop, defaultValue: T[Prop] | undefined, converter: Converter): ReturnType<Converter>;
+declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>>(object: T | RefObject<T>, property: Prop, defaultValue?: T[Prop], converter?: undefined): [T[Prop]];
+declare function useBinding<T extends GObject.Object, Prop extends NonFunctionKeys<T>, Converter extends (value: T[Prop]) => any>(object: T | RefObject<T>, property: Prop, defaultValue: T[Prop] | undefined, converter: Converter): [ReturnType<Converter>];
 //#endregion
 export { useBinding };

package/dist/gobject/use-binding.mjs

@@ -1,16 +1,17 @@
+import { useReference } from "../base/use-reference.mjs";
+import "../base/index.mjs";
 import { useEffect, useState } from "react";
 
 //#region src/gobject/use-binding.ts
 function useBinding(object, _property, defaultValue, converter) {
 	const property = toKebabCase(_property);
+	const value = useReference(object);
 	const [result, setResult] = useState(() => {
-		const value = getValue(object);
 		if (!value) return defaultValue;
 		const initialResult = value[property];
 		return converter ? converter(initialResult) : initialResult;
 	});
 	useEffect(() => {
-		const value = getValue(object);
 		if (!value) {
 			console.error(`Object is null or undefined`);
 			return;
@@ -22,13 +23,7 @@ function useBinding(object, _property, defaultValue, converter) {
 			value.disconnect(id);
 		};
 	}, []);
-	return result;
-}
-function getValue(object) {
-	return isRef(object) ? object.current : object;
-}
-function isRef(object) {
-	return typeof object === "object" && object !== null && "current" in object;
+	return [result];
 }
 function toKebabCase(str) {
 	return str.replace(/([A-Z])/g, "-$1").replace(/_/g, "-").toLowerCase();

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import { useReference } from "./base/use-reference.mjs";
+import "./base/index.mjs";
 import { useBinding } from "./gobject/use-binding.mjs";
 import "./gobject/index.mjs";
-export { useBinding };
+export { useBinding, useReference };

package/dist/index.mjs

@@ -1,4 +1,6 @@
+import { useReference } from "./base/use-reference.mjs";
+import "./base/index.mjs";
 import { useBinding } from "./gobject/use-binding.mjs";
 import "./gobject/index.mjs";
 
-export { useBinding };
+export { useBinding, useReference };

package/dist/types.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/types.mjs

@@ -0,0 +1 @@
+export {  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peachy/hooks",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "",
   "main": "./dist/index.mjs",
   "exports": {
@@ -16,10 +16,11 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@types/react": "^19.2.8",
     "react": "^19.2.3",
     "tsdown": "0.20.0-beta.4",
     "typescript": "^5.9.3",
-    "@peachy/react": "0.0.7"
+    "@peachy/react": "0.0.9"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/base/index.ts

@@ -0,0 +1 @@
+export * from "./use-reference";

package/src/base/use-reference.ts

@@ -0,0 +1,27 @@
+import { RefObject, useEffect, useState } from "react";
+
+/**
+ * Returns the value inside a `ref`, correctly checking it after the initial render
+ */
+export function useReference<T>(
+  value: T | RefObject<T>,
+  defaultValue?: T,
+): T | null {
+  const [result, setResult] = useState<T | null>(() => {
+    return getValue(value) ?? (defaultValue || null);
+  });
+
+  useEffect(() => {
+    setResult(getValue(value));
+  }, [value]);
+
+  return result;
+}
+
+function getValue<T>(object: T | RefObject<T>) {
+  return isRef(object) ? object.current : object;
+}
+
+function isRef<T>(object: unknown): object is RefObject<T> {
+  return typeof object === "object" && object !== null && "current" in object;
+}

package/src/gio/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-network-monitor";
+export * from "./use-setting";

package/src/gio/use-network-monitor.ts

@@ -0,0 +1,35 @@
+import Gio from "gi://Gio?version=2.0";
+import { useCallback, useEffect, useState } from "react";
+
+interface NetworkMonitor {
+  connected: boolean;
+  state: Gio.NetworkConnectivity;
+  metered: boolean;
+  available: boolean;
+}
+
+export function useNetworkMonitor(): NetworkMonitor {
+  const monitor = Gio.NetworkMonitor.get_default();
+  const [state, setState] = useState(() => calculateState());
+
+  const calculateState = useCallback(() => {
+    return {
+      available: monitor.network_available,
+      connected: monitor.connectivity === Gio.NetworkConnectivity.FULL,
+      state: monitor.connectivity,
+      metered: monitor.network_metered,
+    } as NetworkMonitor;
+  }, []);
+
+  useEffect(() => {
+    const id = monitor.connect("network-changed", () => {
+      setState(calculateState());
+    });
+
+    return () => {
+      monitor.disconnect(id);
+    };
+  }, []);
+
+  return state;
+}

package/src/gio/use-setting.ts

@@ -0,0 +1,25 @@
+import Gio from "gi://Gio?version=2.0";
+import GLib from "gi://GLib?version=2.0";
+import { useEffect, useState } from "react";
+
+export function useSetting<T = unknown>(schema: string, key: string) {
+  const settings = Gio.Settings.new(schema);
+
+  const getValue = () => settings.get_value(key).recursiveUnpack() as T;
+
+  const [value, setValue] = useState<T>(() => getValue());
+
+  useEffect(() => {
+    const handler = settings.connect("changed::" + key, () => {
+      setValue(getValue());
+    });
+
+    return () => settings.disconnect(handler);
+  }, [settings, key]);
+
+  const changeValue = (newValue: GLib.Variant) => {
+    settings.set_value(key, newValue);
+  };
+
+  return [value, changeValue] as [T, (newValue: GLib.Variant) => void];
+}

package/src/gobject/use-binding.ts

@@ -1,5 +1,6 @@
 import GObject from "gi://GObject?version=2.0";
 import { RefObject, useEffect, useState } from "react";
+import { useReference } from "../base";
 
 type NonFunctionKeys<T> = {
   [K in keyof T]: T[K] extends Function
@@ -19,7 +20,7 @@ export function useBinding<
   property: Prop,
   defaultValue?: T[Prop],
   converter?: undefined,
-): T[Prop];
+): [T[Prop]];
 export function useBinding<
   T extends GObject.Object,
   Prop extends NonFunctionKeys<T>,
@@ -29,7 +30,7 @@ export function useBinding<
   property: Prop,
   defaultValue: T[Prop] | undefined,
   converter: Converter,
-): ReturnType<Converter>;
+): [ReturnType<Converter>];
 export function useBinding<
   T extends GObject.Object,
   Prop extends NonFunctionKeys<T>,
@@ -41,9 +42,9 @@ export function useBinding<
   converter?: Converter,
 ): any {
   const property = toKebabCase(_property);
+  const value = useReference(object);
 
   const [result, setResult] = useState(() => {
-    const value = getValue(object);
     if (!value) return defaultValue;
     const initialResult = value[property];
     return converter ? converter(initialResult) : initialResult;
@@ -51,8 +52,6 @@ export function useBinding<
 
   // run this on initial render
   useEffect(() => {
-    const value = getValue(object);
-
     if (!value) {
       console.error(`Object is null or undefined`);
       return;
@@ -67,15 +66,7 @@ export function useBinding<
     };
   }, []);
 
-  return result;
-}
-
-function getValue<T extends GObject.Object>(object: T | RefObject<T>) {
-  return isRef(object) ? object.current : object;
-}
-
-function isRef<T>(object: unknown): object is RefObject<T> {
-  return typeof object === "object" && object !== null && "current" in object;
+  return [result] as const;
 }
 
 function toKebabCase(str: string): string {

package/src/index.ts

@@ -1 +1,2 @@
+export * from "./base";
 export * from "./gobject";