# 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
```bash
npm install preact-missing-hooks
```
Ensure `preact` is installed in your project:
```bash
npm install preact
```
---
## 🔧 Usage Examples
### `useTransition`
```tsx
import { useTransition } from 'preact-missing-hooks';
function ExampleTransition() {
const [startTransition, isPending] = useTransition();
const handleClick = () => {
startTransition(() => {
// perform an expensive update here
});
};
return (
);
}
```
---
### `useMutationObserver`
```tsx
import { useRef } from 'preact/hooks';
import { useMutationObserver } from 'preact-missing-hooks';
function ExampleMutation() {
const ref = useRef(null);
useMutationObserver(ref, (mutations) => {
console.log('Detected mutations:', mutations);
}, { childList: true, subtree: true });
return Observe this content
;
}
```
---
### `useEventBus`
```tsx
// 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();
return ;
}
// 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('');
const { on } = useEventBus();
useEffect(() => {
const unsubscribe = on('notify', setMsg);
return unsubscribe;
}, []);
return Message: {msg}
;
}
```
---
## 🛠 Built With
* [Preact](https://preactjs.com)
* [Microbundle](https://github.com/developit/microbundle)
* [TypeScript](https://www.typescriptlang.org)
* [Vitest](https://vitest.dev) for testing
---
## 📝 License
MIT © [Prakhar Dubey](https://github.com/prakhardubey2002)
---
## 📬 Contributing
Contributions are welcome! Please open issues or submit PRs with new hooks or improvements.