Useful hooks for React applications.
npm install @peachy/hooksUseful hooks for React applications.
``bash`
npm install @peachy/hooks
There are different categories of hooks you can use:
#### 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}
Change Theme
);
};
`
#### 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}
);
};
``