Hooks

import { useCopy } from "fromsrc/client";

function CopyButton({ text }: { text: string }) {
  const { copied, copy } = useCopy();

  return (
    <button onClick={() => copy(text)}>{copied ? "copied" : "copy"}</button>
  );
}

import { useToc } from "fromsrc/client";

function CustomToc() {
  const { headings, active } = useToc();

  return (
    <ul>
      {headings.map((h) => (
        <li key={h.id} data-active={h.id === active}>
          <a href={`#${h.id}`}>{h.text}</a>
        </li>
      ))}
    </ul>
  );
}

interface Heading {
  id: string;
  text: string;
  level: number;
}

import { useKeyboardNav } from "fromsrc/client";

function KeyboardNav({ docs }: { docs: DocMeta[] }) {
  useKeyboardNav(docs);
  return null;
}

import { useScrollSpy } from "fromsrc/client";

function ActiveIndicator({ ids }: { ids: string[] }) {
  const activeId = useScrollSpy(ids);
  return <div>active: {activeId}</div>;
}

import { useAnchorScroll } from "fromsrc/client";

function DocsLayout() {
  useAnchorScroll({ offset: 80 });
  return <main>...</main>;
}

import { useIsMobile, useIsDesktop } from "fromsrc/client";

function ResponsiveLayout() {
  const isMobile = useIsMobile();
  return isMobile ? <MobileLayout /> : <DesktopLayout />;
}

import { useLocalStorage } from "fromsrc/client";

function Preferences() {
  const [theme, setTheme] = useLocalStorage("theme", "dark");
  return <button onClick={() => setTheme("light")}>light</button>;
}

import { ToastProvider, useToast } from "fromsrc/client";

function App() {
  return (
    <ToastProvider>
      <NotifyButton />
    </ToastProvider>
  );
}

function NotifyButton() {
  const { add } = useToast();

  return (
    <button onClick={() => add({ message: "saved", type: "success" })}>
      save
    </button>
  );
}

interface Toast {
  id: string;
  message: string;
  type: "info" | "success" | "warning" | "error";
  duration?: number;
}

import { useDebounce } from "fromsrc/client";

function SearchInput() {
  const [query, setQuery] = useState("");
  const debounced = useDebounce(query, 300);

  useEffect(() => {
    if (debounced) search(debounced);
  }, [debounced]);

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}