@playcanvas/react/dist/Container.js

A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.

import { jsx as _jsx } from "react/jsx-runtime";
import { useLayoutEffect, useRef } from "react";
import { useApp } from "./hooks/index.js";
import { Entity } from "./Entity.js";
/**
 * Renders a PlayCanvas asset as a React component.
 * @param {Asset} asset - The PlayCanvas asset to render.
 * @param {React.ReactNode} children - The children to render inside the container.
 * @param {Object} [props] - Additional properties to pass to the container.
 * @returns {React.ReactNode} - The rendered container.
 */
export const Container = ({ asset, children, ...props }) => {
    const entityRef = useRef(null);
    const assetEntityRef = useRef(null);
    const app = useApp();
    useLayoutEffect(() => {
        if (app && asset?.resource && entityRef.current) {
            const resource = asset.resource;
            const assetEntity = resource.instantiateRenderEntity(null);
            entityRef.current.addChild(assetEntity);
            assetEntityRef.current = assetEntity;
        }
        return () => {
            if (!entityRef.current || !assetEntityRef.current)
                return;
            // Don't destroy the underlying resource as it may be used by other components
            assetEntityRef.current.destroy();
            entityRef.current.removeChild(assetEntityRef.current);
            entityRef.current = null;
            assetEntityRef.current = null;
        };
    }, [app, parent, asset, asset?.resource]);
    if (!asset?.resource)
        return null;
    return _jsx(Entity, { ref: entityRef, ...props, children: children });
};
//# sourceMappingURL=Container.js.map