Recipe

React integration

tiny-engine plays nicely inside any React tree: create or sync on effect, destroy on cleanup.

The host component

Write a thin wrapper that creates a named capsule on a React-rendered DOM node with UI.getOrCreate(), then destroys it when the component unmounts.

CapsuleHost.tsx

"use client";
import { useEffect, useRef } from "react";
import { UI } from "tiny-engine-core";
import "./register-capsules"; // your UI.register(...) calls

export function CapsuleHost({ name, options, children }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const instance = UI.getOrCreate(ref.current, name, options);
    return () => instance?.destroy();
  }, [name, options]);

  return <div ref={ref} {...{ [`ui-${name}`]: "" }}>{children}</div>;
}

Using it

tsx

<CapsuleHost name="dropdown" options={{ open: false }}>
  <button ref="trigger">Open</button>
  <ul ref="menu" hidden>...</ul>
</CapsuleHost>