Ziko-Wrapper is a tool that facilitates the rendering of ZikoJS elements within other frameworks and the embedding of framework-specific components into ZikoJS, enabling seamless integration and interoperability between different ecosystems.
- Ziko In Preact :
import {Flex, h2, p} from "ziko"
export default function Comp({color = "darkblue"}){
return Flex(
h2("Wrap Zikojs Element Inside Preact App"),
p("This is a Zikojs Element Wrapped inside Preact Wrapper using Ziko-wrapper")
.style({
color
})
.onClick(()=>console.log("Click ..."))
)
}import Comp from "./Comp.js"
export default function App(){
return(
<div>
<ZikoWrapper>
<Comp color = "darkblue" />
</ZikoWrapper>
</div>
)
}You can also embed Preact components inside a ZikoJS-based UI using the zikofy utility.
// MyPreactComp.jsx
export default function MyPreactComp({ msg }) {
return <button onClick={() => alert(msg)}>{msg}</button>;
}import { Flex, h1 } from "ziko";
import { zikofy } from "ziko-wrapper/preact";
import MyPreactComp from "./MyPreactComp.jsx";
const WrappedPreact = zikofy(MyPreactComp);
export const App = () => Flex(
h1("ZikoJS App with Preact Component"),
WrappedPreact({ msg: "Hello from Preact!" })
);MIT