@peachy/hooks

Useful hooks for React applications.

Installation

npm install @peachy/hooks

Usage

There are different categories of hooks you can use:

Gio

useNetworkMonitor

Returns information about the network connection.

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.

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.

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>
  );
};

Adwaita

useDarkMode

Allows checking the current dark mode state and setting it.

import { useDarkMode } from "@peachy/hooks";

const [darkMode, setDarkMode] = useDarkMode();

useAccentColor

Allows checking the current accent color if set.

import { useAccentColor } from "@peachy/hooks";

const [accentColor] = useAccentColor();

// NOTE: returns `null` if accent colors are unsupported