DEV Community

Discussion on: Let's Build Web Components! Part 7: Hybrids

View post
Collapse
 
drejohnson profile image
DeAndre Johnson •

Hybrids is pretty cool. What do you think about Haunted?

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 • • Edited

Hadn't heard of it 'till now, and had to do some googling to find it:

matthewp / haunted

React's Hooks API implemented for web components 👻

Haunted 🦇 🎃

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

<!doctype html&gt
<html lang="en"&gt
<my-counter></my-counter&gt
<script type="module">
  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
  import { component, useState } from 'https://unpkg.com/haunted/haunted.js';

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

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

  customElements.define('my-counter', component(Counter));
</script>

Getting started

A starter app is available on codesandbox and also can be cloned from this repo. This app gives you the basics of how to…

View on GitHub

Looks worth a glance, maybe I'll write a post on it.

Thanks for the tip!