Ziko-Wrapper

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.

Features

Demos

• Ziko In Preact :

Use Zikojs Inside Preact

Declaration :

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 ..."))
    )
}

Rendering :

import Comp from "./Comp.js"
export default function App(){
    return(
        <div>
            <ZikoWrapper>
                <Comp color = "darkblue" />
            </ZikoWrapper>
        </div>
    )
}

Use Preact Component inside Zikojs App

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!" })
);

Licence

MIT