matthewp / haunted

React's Hooks API implemented for web components πŸ‘»

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Haunted πŸ¦‡ πŸŽƒ

npm npm

React's Hooks API but for standard web components and lit-html or hyperHTML.

πŸ“š Read the Docs πŸ“–

<html lang="en">

  <script type="module">
    import { html } from '';
    import { component, useState } from '';

    function Counter() {
      const [count, setCount] = useState(0);

      return html`
        <div id="count">${count}</div>
        <button type="button" @click=${() => setCount(count + 1)}>

    customElements.define('my-counter', component(Counter));

More example integrations can be found in this gist.


Haunted supports the same API as React Hooks. The hope is that by doing so you can reuse hooks available on npm simply by aliasing package names in your bundler's config.

Currently Haunted supports the following hooks:

Function Signatures

// Or another renderer, see Guides
type Renderer = (element: Element) => TemplateResult;

interface Options {
  baseElement: HTMLElement;
  observedAttributes: string[];
  useShadowDOM: boolean

declare function component(
  renderer: Renderer,
  options: Options
): Element;

declare function component<BaseElement = HTMLElement>(
  renderer: Renderer,
  baseElement: BaseElement,
  options: Options
): Element

declare function virtual(renderer: Renderer): Directive



ezoic increase your site revenue


React's Hooks API implemented for web components πŸ‘»

License:BSD 2-Clause "Simplified" License


Language:TypeScript 93.7%Language:JavaScript 3.2%Language:HTML 2.1%Language:Makefile 0.9%Language:Shell 0.1%