Inside React

A custom element is just a DOM element, so React renders it like any other tag. There is no wrapper package and no adapter — the only React-specific detail is that custom events need addEventListener rather than an onX prop.

The component

function TasteWidget() {
  const ref = useRef(null);
  const [summary, setSummary] = useState(null);

  useEffect(() => {
    const el = ref.current;
    const onComplete = (event) => setSummary(event.detail);
    // React does not map custom events to props, so subscribe directly.
    el.addEventListener('te-complete', onComplete);
    return () => el.removeEventListener('te-complete', onComplete);
  }, []);

  return (
    <>
      <taste-engine ref={ref} provider="demo" theme="dark-arcade" cards="6" />
      {summary && <Result summary={summary} />}
    </>
  );
}

React and Babel are loaded from a CDN here purely to keep this file self-contained; TasteEngine itself has no dependencies. In a real project you would import 'taste-engine' and use the same markup.