haunted

Verfolgt? ?

Reacts Hooks-API, aber für Standard-Webkomponenten und lit-html oder hyperHTML.

Lesen Sie die Dokumente

 < html lang =" en " >
  < my-counter > </ my-counter >

  < script type =" module " >
    import { html } from 'https://unpkg.com/lit?module' ;
    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 >
</ html >

Weitere Beispielintegrationen finden Sie in diesem Gist.

Haken

Haunted unterstützt dieselbe API wie React Hooks. Die Hoffnung besteht darin, dass Sie auf diese Weise auf npm verfügbare Hooks wiederverwenden können, indem Sie einfach Paketnamen in der Konfiguration Ihres Bundlers aliasen.

Derzeit unterstützt Haunted die folgenden Hooks:

• useCallback
• useContext
• useController
• useEffect
• useLayoutEffect
• Verwenden Sie Memo
• useReducer
• useRef
• useState

Funktionssignaturen

 // 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 

Lizenz

BSD-2-Klausel