ziko-wrapper/wrappers/preact/ziko-wrapper.jsx

integrate zikojs elements within other ui framework like vue react solidjs svelte astro ...

import { render } from "preact"; 
import { useRef, useEffect } from "preact/hooks";

export function ZikoWrapper({ children }) {
    const containerRef = useRef(null);
    
    useEffect(() => {
        if (containerRef.current) {
            containerRef.current.innerHTML = "";             
            const childrenArray = Array.isArray(children) ? children : [children];
            childrenArray.forEach((child) => {
                const childWithProps = { ...child, props: { ...child.props } };
                const childElement = render(childWithProps, containerRef.current, containerRef.current.firstChild);
                if (childElement instanceof HTMLElement) {
                    containerRef.current.appendChild(childElement);
                }
            });
        }
    }, [children]);

    return (
        <div 
        data-wrapper="ziko-wrapper" 
        data-engine="ziko.js" 
        ref={containerRef}
        style={{display : "contents"}}
        ></div>
    );
}