integrate zikojs elements within other ui framework like vue react solidjs svelte astro ...
npm install ziko-wrapper> [!NOTE]
> This project is part of the ZikoJS ecosystem.
js
// HelloFromZiko.js
import {h1} from "ziko"
export default HelloFromZiko=({color})=>{
return h1(Hello World, this is a Zikojs component.).style({
color
})
}
`
$3
#### 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 (
color="blue"
/>
)
}
`
#### Vue
`xml
color="green"
/>
`
#### 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"
---
color="orange"
client:only
/>
``