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.

Current Support Table for Ziko-Wrapper

Framework/Library	Integrate ZikoJS	Get Integrated in ZikoJS	Remark
React	✅ Supported	✅ Supported
Svelte	✅ Supported	✅ Supported
Solid	✅ Supported	✅ Supported
Vue	✅ Supported	✅ Supported
Preact	✅ Supported	✅ Supported
Astro	✅ Supported	❌ Not Supported	Astro
Next	✅ Supported	❌ Not Supported
Remix	✅ Supported	❌ Not Supported
SvelteKit	✅ Supported	❌ Not Supported
React Native	✅ Supported	❌ Not Supported

Integrate Zikojs inside Other Environment

UI Decalaration

// HelloFromZiko.jsimport{h1}from"ziko"exportdefaultHelloFromZiko=({color})=>{returnh1(`Hello World, this is a Zikojs component.`).style({
color
})}

Use

JSX Based

importZikoWrapperfrom"ziko-wrapper/react"// import ZikoWrapper from "ziko-wrapper/solid"// import ZikoWrapper from "ziko-wrapper/preact"importHelloFromZikofrom"./HelloFromZiko.js"exportdefaultfunctionApp(){return(<ZikoWrapper><HelloFromZikocolor="blue"/></ZikoWrapper>)}

Vue

<script>
import ZikoWrapper from "ziko-wrapper/vue"
import HelloFromZiko from "./HelloFromZiko.js"
</script>
<template>
<ZikoWrapper>
<HelloFromZikocolor="green" />
</ZikoWrapper>
</template>

Svelte

---importZikoWrapperfrom"ziko-wrapper/svelte";importHelloFromZikofrom"./HelloFromZiko.js"---<ZikoWrapperui={HelloFromZiko({color:"orange"})}/>

Astro

• Customize the astro.config.mjs file

import{defineConfig}from'astro/config';importzikofrom"ziko-wrapper/astro"exportdefaultdefineConfig({integrations : [ziko()]})

• Define The component

// HelloFromZikoJs.jsimport{p}from"ziko"exportdefaultHelloFromZikoJs=({color})=>p("Hello From Zikojs").style({color})

• Render The component

---importHelloFromZikofrom"./HelloFromZiko.js"---<HelloFromZikocolor="orange"client:only/>

Integrate Other Framewrok components inside Zikojs

React

Solid

Svelte

Vue

Preact

Supports

Licence