Demos

Granular mount

main.tsx

// Turn any hook into a ✨ nook ✨
const mountInterval = nook(useInterval);

function GranularMount() {
  // Animation state
  const [walkIdx, incrementWalkIdx] = useModuloCounter(WALKING_FRAMES.length);
  const [lookIdx, incrementLookIdx] = useModuloCounter(LOOKING_FRAMES.length);
  const [walk, toggleWalk] = useToggle(true);
  const [look, toggleLook] = useToggle(true);

  // You can use nooks inside regular components via
  // the `useNook` hook
  useNook(() => {
    walk && mountInterval``(incrementWalkIdx, 100);
    look && mountInterval``(incrementLookIdx, 100);
  });

  return (
    <div className="grid gap-2 max-w-sm place-items-center place-content-center mx-auto mt-12 grid-cols-2">
      <pre className={walk ? '' : 'opacity-50'}>
        <code>{WALKING_FRAMES[walkIdx]}</code>
      </pre>
      <pre className={look ? '' : 'opacity-50'}>
        <code>{LOOKING_FRAMES[lookIdx]}</code>
      </pre>
      <Btn onClick={toggleWalk}>{walk ? 'Pause' : 'Play'}</Btn>
      <Btn onClick={toggleLook}>{look ? 'Pause' : 'Play'}</Btn>
    </div>
  );
}

hooks.ts

import { useCallback, useEffect, useState } from 'react';

export function useModuloCounter(mod: number) {
  const [value, setValue] = useState(0);

  const increment = useCallback(
    () => setValue((prev) => (prev + 1) % mod),
    [mod],
  );

  return [value, increment] as const;
}

export function useToggle(initial: boolean) {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue((prev) => !prev), []);

  return [value, toggle] as const;
}

export function useInterval(callback: () => unknown, interval: number) {
  // We can use vanilla React hooks inside "nooks", and resort to builtin nooks
  // when we need to call something conditionally
  useEffect(() => {
    const handle = window.setInterval(callback, interval);
    return () => window.clearInterval(handle);
  }, [interval, callback]);
}

Delete with “nevermind”

main.tsx

// Turn any hook into a ✨ nook ✨
const mountInterval = nook(useInterval);

// Nooks are just functions that can use other nooks, so they can also be components
const DeleteWithNevermind = nook(() => {
  const [step, next] = useStep();

  if (step === 0) {
    // Not deleting...
    return <Btn onClick={() => next()}>Delete</Btn>;
  }

  if (step < 3) {
    // Mounting the interval nook conditionally, which
    // will call `next` every second
    mountInterval``(next, 1000);

    return (
      <>
        <Btn onClick={() => next(0)} highlighted>
          Bring it back!
        </Btn>
        <p>{step === 1 ? 'Deleting...' : 'You can still stop this...'}</p>
      </>
    );
  }

  return (
    <>
      <Btn onClick={() => next(0)}>Restore</Btn>
      <p>Deleted</p>
    </>
  );
});

hooks.ts

import { useEffect, useState } from 'react';

export function useInterval(callback: () => unknown, ms: number) {
  useEffect(() => {
    const handle = window.setInterval(callback, ms);
    return () => {
      window.clearInterval(handle);
    };
  }, [callback, ms]);
}

export function useStep() {
  const [step, setStep] = useState(0);

  const next = (force?: number | undefined) => {
    setStep((v) => force ?? v + 1);
  };

  return [step, next] as const;
}

Simple timer

main.tsx

// Turn any hook into a ✨ nook ✨
const mountTimer = nook(useTimer);

// Nooks are just functions that can use other nooks, so they can also be components
const Timer = nook(() => {
  const [active, setActive] = useState(false);
  const toggle = () => setActive((prev) => !prev);

  return (
    <div className="grid gap-2 max-w-sm place-items-center place-content-center mx-auto grid-cols-2 m-12">
      {/* Only using `mountTimer` when active, directly in markup */}
      <p className="min-w-[5rem]">Time: {active ? mountTimer``(100) : 0}</p>
      <Btn onClick={toggle} highlighted={active}>
        {active ? 'Stop' : 'Start'}
      </Btn>
    </div>
  );
});

use-timer.ts

import { useEffect, useState } from 'react';

// A custom React hook, nothing fancy here
export function useTimer(interval: number) {
  const [value, setValue] = useState(0);

  useEffect(() => {
    const handle = window.setInterval(() => {
      setValue((prev) => prev + 1);
    }, interval);

    return () => clearInterval(handle);
  }, [interval]);

  return value;
}