haunted

ผีสิง? -

Hooks API ของ React แต่สำหรับส่วนประกอบเว็บมาตรฐานและ lit-html หรือ hyperHTML

อ่านเอกสาร

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

สามารถดูตัวอย่างการผสานรวมเพิ่มเติมได้ในส่วนสำคัญนี้

ตะขอ

Haunted รองรับ API เดียวกันกับ React Hooks ความหวังก็คือการทำเช่นนั้น คุณจะสามารถนำ hooks ที่มีอยู่ในเวลา npm กลับมาใช้ใหม่ได้ เพียงแค่ใช้นามแฝงของชื่อแพ็คเกจในการกำหนดค่าของ Bundler ของคุณ

ปัจจุบัน Haunted รองรับ hooks ต่อไปนี้:

• ใช้โทรกลับ
• ใช้บริบท
• ใช้คอนโทรลเลอร์
• ใช้เอฟเฟกต์
• ใช้LayoutEffect
• ใช้บันทึก
• ใช้ลด
• ใช้อ้างอิง
• ใช้สถานะ

ลายเซ็นฟังก์ชัน

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

ใบอนุญาต

BSD-2-ข้อ