🦝 sly-react

sly adapters for react apps

convert sly views into react components.

compatible with react 18 and 19.

go go go!

1. install @e280/sly-react

   npm i @e280/sly-react @e280/sly react react-dom

2. let's assume you've got a sly view like this

   import {html} from "lit"
   import {view} from "@e280/sly"
   
   const CounterSly = view(use => (start: number) => {
       const $count = use.signal(start)
       return html`
         <slot></slot>
   	    <button @click="${() => $count.value++}">
   		    ${$count.value}
   	    </button>
       `
   })

3. convert your sly view into a react component

   import {reactify} from "@e280/sly-react"
   import {CounterSly} from "./counter-sly.js"
   
   const CounterReact = reactify(CounterSly)

4. render your sly view in your react component

   const MyReactComponent = () => (
     <CounterReact props={[1]}>
       <p>hello world</p>
     </CounterReact>
   )

   • sly props are passed as an array
   • children can be slotted in

🧑‍💻🦝 sly is by e280

reward us with github stars
build with us at https://e280.org/ but only if you're cool