ziko-wrapper
Version:
integrate zikojs elements within other ui framework like vue react solidjs svelte astro ...
122 lines (107 loc) • 2.91 kB
Markdown
> [!NOTE]
> This project is part of the [ZikoJS](https://github.com/zakarialaoui10/ziko.js) ecosystem.
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.
<!--
- [Integrate Zikojs inside Other Environment](
- [Jsx Based]
- [Vue]
- [Svelte] -->
|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|
```js
// HelloFromZiko.js
import {h1} from "ziko"
export default HelloFromZiko=({color})=>{
return h1(`Hello World, this is a Zikojs component.`).style({
color
})
}
```
```jsx
import ZikoWrapper from "ziko-wrapper/react"
// import ZikoWrapper from "ziko-wrapper/solid"
// import ZikoWrapper from "ziko-wrapper/preact"
import HelloFromZiko from "./HelloFromZiko.js"
export default function App(){
return (
<ZikoWrapper>
<HelloFromZiko
color="blue"
/>
</ZikoWrapper>
)
}
```
```xml
<script>
import ZikoWrapper from "ziko-wrapper/vue"
import HelloFromZiko from "./HelloFromZiko.js"
</script>
<template>
<ZikoWrapper>
<HelloFromZiko
color="green"
/>
</ZikoWrapper>
</template>
```
```jsx
---
import ZikoWrapper from "ziko-wrapper/svelte";
import HelloFromZiko from "./HelloFromZiko.js"
---
<ZikoWrapper ui={HelloFromZiko({color:"orange"})}/>
```
- Customize the astro.config.mjs file
```js
import { defineConfig } from 'astro/config';
import ziko from "ziko-wrapper/astro"
export default defineConfig({
integrations : [
ziko()
]
})
```
- Define The component
```js
// HelloFromZikoJs.js
import {p} from "ziko"
export default HelloFromZikoJs=({color})=>p("Hello From Zikojs").style({color})
```
- Render The component
```jsx
---
import HelloFromZiko from "./HelloFromZiko.js"
---
<HelloFromZiko
color="orange"
client:only
/>
```