Gnim Hooks

Gnim utilities for working with reactive values.

Demo

``tsx
import Gtk from "gi://Gtk?version=4.0"
import { $, useEffect } from "gnim-hooks"
import { cls, useStyle } from "gnim-hooks/gtk4"
import { createComputed, type Node } from "gnim"

// mark props as reactive with $
type BoxProps = {
class?: $ // Accessor | string
gap?: $
padding?: $
vertical?: $
children?: Node | Node[]
}

export default function Box(props: BoxProps) {
// avoid handling both reactive and static props
// by wrapping props with $ and only worry about reactive props
const className = $(props.class)
const gap = $(props.gap, (v) => v ?? 2)
const padding = $(props.padding, (v) => v ?? 0)
const orientation = $(props.vertical, (v) =>
v ? Gtk.Orientation.VERTICAL : Gtk.Orientation.HORIZONTAL,
)

// define scoped css using useStyle which returns a unique className
const cn = useStyle(
// if values are reactive you can use a computed value
createComputed((get) => ({
"border-spacing": ${get(gap)}px,
"padding": ${get(padding)}px,
})),
)

// useEffect lets you handle Accessor subscriptions with ease
useEffect((get) => {
if (get(orientation) === Gtk.Orientation.VERTICAL) {
console.log(box is vertical and has ${get(gap)} gap)
}
})

return (
// use cls to pass multiple classNames

{props.children}

)
}
``