Preact Missing Hooks

A lightweight, extendable collection of React-like hooks for Preact, including utilities for transitions, DOM mutation observation, and global event buses.

✨ Features

🔄 useTransition — Defers state updates to yield a smoother UI experience.
🔍 useMutationObserver — Reactively observes DOM changes with a familiar hook API.
📡 useEventBus — A simple publish/subscribe system, eliminating props drilling or overuse of context.
✅ Fully TypeScript compatible
📦 Bundled with Microbundle
⚡ Zero dependencies (except preact)

📦 Installation

npm install preact-missing-hooks

Ensure preact is installed in your project:

npm install preact

🔧 Usage Examples

`useTransition`

import { useTransition } from 'preact-missing-hooks';

function ExampleTransition() {
  const [startTransition, isPending] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      // perform an expensive update here
    });
  };

  return (
    <button onClick={handleClick} disabled={isPending}>
      {isPending ? 'Loading...' : 'Click Me'}
    </button>
  );
}

`useMutationObserver`

import { useRef } from 'preact/hooks';
import { useMutationObserver } from 'preact-missing-hooks';

function ExampleMutation() {
  const ref = useRef<HTMLDivElement>(null);

  useMutationObserver(ref, (mutations) => {
    console.log('Detected mutations:', mutations);
  }, { childList: true, subtree: true });

  return <div ref={ref}>Observe this content</div>;
}

`useEventBus`

// types.ts
export type Events = {
  notify: (message: string) => void;
};

// Sender.tsx
import { useEventBus } from 'preact-missing-hooks';
import type { Events } from './types';

function Sender() {
  const { emit } = useEventBus<Events>();
  return <button onClick={() => emit('notify', 'Hello World!')}>Send</button>;
}

// Receiver.tsx
import { useEventBus } from 'preact-missing-hooks';
import { useState, useEffect } from 'preact/hooks';
import type { Events } from './types';

function Receiver() {
  const [msg, setMsg] = useState<string>('');
  const { on } = useEventBus<Events>();

  useEffect(() => {
    const unsubscribe = on('notify', setMsg);
    return unsubscribe;
  }, []);

  return <div>Message: {msg}</div>;
}

🛠 Built With

📝 License

📬 Contributing

Contributions are welcome! Please open issues or submit PRs with new hooks or improvements.

Package detail

preact-missing-hooks

readme