Haunted

React's Hooks API implemented for web components

README

Haunted 🦇 🎃

npm npm

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

📚 Read the Docs 📖

  1. ```html
  2. <html lang="en">
  3.   <my-counter></my-counter>
  4. <script type="module">
  5.     import { html } from 'https://unpkg.com/lit?module';
  6.     import { component, useState } from 'https://unpkg.com/haunted/haunted.js';
  7.     function Counter() {
  8.       const [count, setCount] = useState(0);
  9.       return html`
  10.         <div id="count">${count}</div>
  11.         <button type="button" @click=${() => setCount(count + 1)}
  12.           Increment
  13.         </button>
  14.       `;
  15.     }
  16.     customElements.define('my-counter', component(Counter));
  17.   </script>
  18. </html>
  19. ```

More example integrations can be found in this gist.

Hooks


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


  1. ```ts
  2. // Or another renderer, see Guides
  3. type Renderer = (element: Element) => TemplateResult;

  4. interface Options {
  5.   baseElement: HTMLElement;
  6.   observedAttributes: string[];
  7.   useShadowDOM: boolean
  8. }

  9. declare function component(
  10.   renderer: Renderer,
  11.   options: Options
  12. ): Element;

  13. declare function component<BaseElement = HTMLElement>(
  14.   renderer: Renderer,
  15.   baseElement: BaseElement,
  16.   options: Options
  17. ): Element

  18. declare function virtual(renderer: Renderer): Directive

  19. ```

License


BSD-2-Clause