You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
Lit Functional Components aims to provide a simple wrapper around Lit components, offering a streamlined development experience without introducing every React-like syntax and feature.
Installation
Yarn
yarn add lit-functions
Npm
npm install lit-functions
Usage
Component and props
TheuseProp function is similar touseState in React. In Lit, properties and attributes are used, eliminating the need for a separateuseState. Instead, define Lit properties, and whenever a property changes, the component re-renders. The type of the properties is inferred from the type argument.
If you would like to react on property change, you can either useupdated orusePropChanged hook. It's very similar touseEffect, you should provide a callback and the list of dependencies in string format.
The component function creates a custom web component, with the name generated from the function name.
import{html,css}from"lit";importlitLogofrom'./assets/lit.svg'importviteLogofrom'/vite.svg'importcomponent,{Props}from"../../src";conststyle=css``functionmyElement({ useProp, usePropChanged}:Props){const[count,setCount]=useProp('count',{type:Number},0);const[docs,_]=useProp('docs',{type:String},'This is some test docs');usePropChanged(()=>{console.log('count value changed')},['count']);returnhtml`<div><ahref="https://vitejs.dev"target="_blank"><imgsrc=${viteLogo}class="logo" alt="Vite logo"/></a><ahref="https://lit.dev"target="_blank"><imgsrc=${litLogo}class="logo lit" alt="Lit logo"/></a></div><slot></slot><divclass="card"><buttonpart="button"@click="${()=>setCount(count+1)}"> count is${count}</button></div><pclass="read-the-docs">${docs}</p> `}component(myElement,[style]);
Lifecycle Methods
onMount and onUnMount
These functions correspond to connectedCallback and disconnectedCallback, respectively, and are high-order functions.
If you need direct access to the Lit instance, use themeta property.
functionmyElement({meta}:{meta:LitElement}){}
Handling Events
Manage events withdispatchEvent from theprops, which dispatches an event on the current Lit element.
import{html,css}from"lit";importlitLogofrom'./assets/lit.svg'importviteLogofrom'/vite.svg'importcomponent,{Props}from"../../src";conststyle=css``functionmyElement({dispatchEvent}:Props){functiondispatchMyCustomEvent(){dispatchEvent(newCustomEvent('foo-event',{detail:{foo:'foo'}}));}returnhtml`<buttonpart="button"@click="${()=>dispatchMyCustomEvent()}"> dispatch an event</button> `}component(myElement,[style]);
Contributing
Please seeCONTRIBUTING.md for the contribution guidelines
About
It's a wrapper around lit-element to provide functional components