Practicalhooks
forReact,VueandNuxt

import { useAsync } from "@cermuel/hooks/react";export function useAsyncExample() {  async function fetchUser() { return { name: 'Ada' }; }  const request = useAsync(fetchUser);  return <button type="button" onClick={() => void request.execute()}>Load</button>;}

import { useState } from "react";import { useAutosave } from "@cermuel/hooks/react";export function useAutosaveExample() {  const [draft, setDraft] = useState({ title: "" });  const autosave = useAutosave(draft, async () => undefined);  return (    <label>      <input        value={draft.title}        onChange={(event) => setDraft({ title: event.target.value })}      />      {autosave.status}    </label>  );}

import { useBattery } from "@cermuel/hooks/react";export function useBatteryExample() {  const battery = useBattery();  return <p>{battery.level == null ? "Unknown" : battery.level}</p>;}

import { useBreakpoint } from "@cermuel/hooks/react";export function useBreakpointExample() {  const breakpoint = useBreakpoint({ sm: 640, md: 768, lg: 1024 });  return <p>{breakpoint}</p>;}

import { useState, useRef } from "react";import { useClickOutside } from "@cermuel/hooks/react";export function useClickOutsideExample() {  const [open, setOpen] = useState(true);  const target = useRef<HTMLDivElement>(null);  useClickOutside(target, () => setOpen(false));  return <div ref={target}>{open ? "Open" : "Closed"}</div>;}

import { useClipboard } from "@cermuel/hooks/react";export function useClipboardExample() {  const { text, copy } = useClipboard();  return <button type="button" onClick={() => void copy("Hello")}>{text || "Copy"}</button>;}