https://github.com/prakhardubey2002/preact-missing-hooks
A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.
https://github.com/prakhardubey2002/preact-missing-hooks
hooks microbundle preact preact-hooks react-hooks typescript usetransition
Last synced: 7 months ago
JSON representation
A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.
- Host: GitHub
- URL: https://github.com/prakhardubey2002/preact-missing-hooks
- Owner: prakhardubey2002
- License: mit
- Created: 2025-05-26T06:51:55.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-05-28T15:04:12.000Z (9 months ago)
- Last Synced: 2025-06-07T12:48:18.389Z (9 months ago)
- Topics: hooks, microbundle, preact, preact-hooks, react-hooks, typescript, usetransition
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/preact-missing-hooks
- Size: 161 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```
---
## 🔧 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 (
{isPending ? 'Loading...' : 'Click Me'}
);
}
```
---
### `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 emit('notify', 'Hello World!')}>Send;
}
// 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.