https://github.com/zakarialaoui10/ziko-wrapper
render zikojs elements within other frameworks
https://github.com/zakarialaoui10/ziko-wrapper
astro hyperapp lit nextjs nuxt preact react react-native solid svelte vanjs vue zikojs
Last synced: 2 months ago
JSON representation
render zikojs elements within other frameworks
- Host: GitHub
- URL: https://github.com/zakarialaoui10/ziko-wrapper
- Owner: zakarialaoui10
- License: mit
- Created: 2024-03-19T21:19:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-20T17:41:24.000Z (4 months ago)
- Last Synced: 2025-03-06T00:02:05.471Z (4 months ago)
- Topics: astro, hyperapp, lit, nextjs, nuxt, preact, react, react-native, solid, svelte, vanjs, vue, zikojs
- Language: JavaScript
- Homepage:
- Size: 531 KB
- Stars: 31
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
> [!NOTE]
> This project is part of the [ZikoJS](https://github.com/zakarialaoui10/ziko.js) ecosystem.
# 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](#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
```js
// HelloFromZiko.js
import {h1} from "ziko"
export default HelloFromZiko=({color})=>{
return h1(`Hello World, this is a Zikojs component.`).style({
color
})
}
```
### Use
#### JSX Based
```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 (
)
}
```
#### Vue
```xml
import ZikoWrapper from "ziko-wrapper/vue"
import HelloFromZiko from "./HelloFromZiko.js"
```
#### Svelte
```jsx
---
import ZikoWrapper from "ziko-wrapper/svelte";
import HelloFromZiko from "./HelloFromZiko.js"
---
```
#### Astro
- 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"
---
```
## Integrate Other Framewrok components inside Zikojs
### React
### Solid
### Svelte
### Vue
### Preact
# Supports
# Licence