Haunted
React's Hooks API implemented for standard web components, enabling stateful and reactive custom elements.
What is Haunted?
Haunted is a library that implements React's Hooks API for standard web components. It allows developers to create stateful and reactive custom elements using hooks like `useState` and `useEffect`, bringing React-like development patterns to native browser components. This solves the problem of writing complex, state-driven logic in web components without relying on a full framework.
Frontend developers building with web components who want to use React's Hooks patterns for state and lifecycle management. It's ideal for those creating reusable, framework-agnostic UI libraries or applications leveraging custom elements.
Developers choose Haunted because it provides the familiar and powerful React Hooks API within the standards-based web components ecosystem, enabling code reuse from the React ecosystem while maintaining native browser compatibility and portability.
Overview
React's Hooks API implemented for web components 👻
Use Cases
Best For
- Adding state and lifecycle management to vanilla web components
- Reusing existing React hooks in a web components project
- Building framework-agnostic UI libraries with reactive patterns
- Migrating React components to web components without rewriting logic
- Creating portable custom elements with complex internal state
- Integrating lit-html or hyperHTML with hooks for templating
Not Ideal For
- Projects deeply integrated with React's JSX and tooling ecosystem, as Haunted uses template literals and requires a separate templating library.
- Applications requiring built-in server-side rendering support, since web components and Haunted have limited native SSR capabilities compared to frameworks like Next.js.
- Teams seeking a full-featured framework with integrated routing, form handling, and state management, as Haunted is minimal and only provides hooks for web components.
Pros & Cons
Pros
Implements the same API as React Hooks, enabling direct reuse of existing hooks from npm by aliasing packages, as stated in the README under 'Hooks'.
Integrates with standard custom elements, making components framework-agnostic and usable across any environment that supports web components.
Renderer agnostic, compatible with lit-html or hyperHTML for templating, offering choice in rendering approaches as highlighted in the features.
Supports virtual() for creating directives, useful for conditional or performance-sensitive rendering, mentioned in the 'Virtual Components' feature.
Cons
Requires using template literals or learning lit-html/hyperHTML syntax, which can be a barrier for developers accustomed to React's JSX.
Necessitates integrating lit-html or hyperHTML for rendering, adding complexity to setup and dependency management compared to all-in-one solutions.
As a niche library, it has fewer community-contributed hooks, pre-built components, and comprehensive documentation than mainstream frameworks.
Frequently Asked Questions
Related Projects
Solid ElementA declarative, efficient, and flexible JavaScript library for building user interfaces.
hybridsExtraordinary JavaScript UI framework with unique declarative and functional architecture
React HangerA collection of useful React hooks
atomicoAtomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.