@peachy/hooks

Useful hooks for React applications.

Installation

``bash
npm install @peachy/hooks
`

Usage

There are different categories of hooks you can use:

$3

#### useNetworkMonitor

Returns information about the network connection.

`tsx
import { useNetworkMonitor } from "@peachy/hooks";

const App = () => {
const { connected } = useNetworkMonitor();

return (

{connected ? "Connected" : "Disconnected"}

);
};
`

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 (


Theme: {value}

changeValue("Adwaita-dark")}>
Change Theme


);
};
`

$3

#### 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 (


Theme: {darkMode ? "Dark" : "Light"}



Accent Color: {accentColor}


);
};
``