Vue composables for Shak Hooks
@shak-hooks/vueVue 3 composables for Shak Hooks.
``bash`
npm i @shak-hooks/vue
- Vue >=3
`vue
{{ count }}
`
Run only the Vue composable tests from the repo root:
`bash`
pnpm test:vue
- useBattery
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Tracks the Battery Status API (when supported).
`ts`
const { level, charging } = useBattery();
Calls a handler when a click happens outside the target element ref.
`ts`
const el = ref
useClickAway(el, () => (open.value = false));
Retries an async/sync callback at a fixed interval until it returns true or hits maxRetries.
`ts`
const done = useContinuousRetry(() => Boolean(localStorage.getItem("ready")), 200, { maxRetries: 10 });
Copies text to the clipboard.
`ts`
const { value, copy, error } = useCopyToClipboard();
await copy("hello");
Countdown timer with controls.
`ts`
const { count, start, stop, reset } = useCountdown(10);
Counter with optional min/max and helpers.
`ts`
const [count, { inc, dec, set, reset }] = useCounter(0, { min: 0, max: 10 });
Debounces a value/ref and returns a Ref of the debounced value.
`ts`
const debounced = useDebounce(search, 250);
Returns a computed default when the internal state is null/undefined.
`ts`
const { value, state } = useDefault
Sets document.title (with optional restore on unmount).
`tsPage: ${route.name}
useDocumentTitle(() => , { restoreOnUnmount: true });`
Adds an event listener to window (default) or a provided target/ref target. Returns a stop() cleanup function.
`ts`
const stop = useEventListener("keydown", (e) => console.log(e));
stop();
Sets the favicon URL.
`ts`
useFavicon("/favicon.ico");
Reactive fetch helper with data, error, loading, execute, abort.
`ts`
const { data, loading, error } = useFetch<{ ok: boolean }>("/api/health");
Tracks the Geolocation API (when supported).
`ts`
const { coords, locatedAt, error } = useGeolocation();
Stores state in history.state under a key.
`ts`
const { state, setHistoryState } = useHistoryState({ tab: "home" }, "page-state");
Tracks hover state for an element ref.
`ts`
const el = ref
const hovered = useHover(el);
Becomes true after ms of no activity; resets on user activity.
`ts`
const idle = useIdle(60_000);
IntersectionObserver wrapper.
`ts`
const el = ref
const entry = useIntersectionObserver(el, { threshold: 0.1 });
Interval runner with a reactive delay (pass null to pause).
`ts`
useInterval(() => tick.value++, delay);
Interval runner gated by a boolean condition.
`ts`
useIntervalWhen(() => tick.value++, 1000, enabled, true);
Returns true after the component mounts.
`ts`
const isClient = useIsClient();
Returns true on the first render, then false.
`ts`
const isFirst = useIsFirstRender();
Tracks whether a specific key is currently pressed.
`ts`
const pressed = useKeyPress("Escape");
List state with helper actions.
`ts`
const [list, actions] = useList
actions.push("b");
LocalStorage-backed state.
`ts`
const [value, setValue] = useLocalStorage("theme", "light");
Locks body scroll (sets body.style.overflow = "hidden").
`ts`
useLockBodyScroll(true);
Console logging lifecycle helper (mount/update/unmount).
`ts`
useLogger("MyComponent", { debug: true });
Long-press detection for mouse/touch with callbacks.
`ts`
const bind = useLongPress(() => console.log("long press"), { delay: 500 });
Map state with helper actions.
`ts`
const [map, actions] = useMap
actions.set("b", 2);
Element measurement via ResizeObserver.
`ts`
const [el, rect] = useMeasure();
Tracks a media query match.
`ts`
const isWide = useMediaQuery("(min-width: 768px)");
Tracks mouse position.
`ts`
const { x, y } = useMouse();
Tracks network status (online/offline + connection info where available).
`ts`
const state = useNetworkState();
Object state with merge update.
`ts`
const { state, update } = useObjectState({ a: 1, b: 2 });
update({ b: 3 });
Tracks device orientation events (where available).
`ts`
const state = useOrientation();
Calls a callback when the mouse leaves the page viewport.
`ts`
usePageLeave(() => console.log("left page"));
Returns the user’s preferred language (when available).
`ts`
const lang = usePreferredLanguage();
Returns the previous value of a ref/getter.
`ts`
const prev = usePrevious(() => value.value);
Queue state with helper actions.
`ts`
const [queue, actions] = useQueue
actions.add(3);
Runs a callback at random intervals between minDelay and maxDelay.
`ts`
useRandomInterval(() => console.log("tick"), 500, 1500);
Returns the current render count.
`ts`
const renders = useRenderCount();
Logs render timing information to the console.
`ts`
useRenderInfo("MyComponent");
Loads an external script and returns its status ref.
`ts`
const status = useScript("https://example.com/sdk.js");
SessionStorage-backed state.
`ts`
const [value, setValue] = useSessionStorage("draft", "");
Set state with helper actions.
`ts`
const { set, add, remove, has, toggle, reset } = useSet
add("b");
Throttles a rapidly changing value/ref.
`ts`
const throttled = useThrottle(value, 250);
Runs a callback after a reactive delay (pass null to disable).
`ts`
useTimeout(() => console.log("done"), delay);
Boolean toggle with helper actions.
`ts`
const [on, actions] = useToggle(false);
actions.toggle();
Tracks whether the document is visible.
`ts`
const visible = useVisibilityChange();
Tracks window scroll position.
`ts`
const { x, y } = useWindowScroll();
Tracks window size.
`ts``
const { width, height } = useWindowSize();