haunted

Hanté ? ?

L'API Hooks de React mais pour les composants Web standard et lit-html ou hyperHTML.

Lire les documents

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

D’autres exemples d’intégrations peuvent être trouvés dans cet aperçu.

Crochets

Haunted prend en charge la même API que React Hooks. L'espoir est qu'en procédant ainsi, vous pourrez réutiliser les hooks disponibles sur npm simplement en aliasant les noms de packages dans la configuration de votre bundler.

Actuellement, Haunted prend en charge les hooks suivants :

• utiliserCallback
• utiliserContext
• utiliserContrôleur
• utiliserEffet
• useLayoutEffect
• utiliserMémo
• utiliserRéducteur
• utiliserRef
• utiliserÉtat

Signatures de fonction

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

Licence

Clause BSD-2