createReactBridge() function

Home > @rimitive/react > createReactBridge

createReactBridge() function

Creates a ref callback that mounts a React component into a DOM element. The component re-renders whenever reactive dependencies in the props getter change.

This enables embedding React components (like @xyflow/react) inside a Rimitive app.

Signature:

export declare function createReactBridge<P extends object>(effect: EffectFn, Component: ComponentType<P>, getProps: () => P): (container: HTMLElement) => () => void;

Parameters

Parameter	Type	Description
effect	EffectFn	The effect function from a signal service (svc.effect)
Component	ComponentType<P>	The React component to render
getProps	() => P	A function that returns props for the component (can read signals)

Returns:

(container: HTMLElement) => () => void

A ref callback for use with el().ref()

Example

import { createReactBridge } from '@rimitive/react';
import { ReactFlow } from '@xyflow/react';

const MyGraph = (svc) => {
  const { el, signal, effect } = svc;
  const nodes = signal([]);
  const edges = signal([]);

  const graphRef = createReactBridge(effect, ReactFlow, () => ({
    nodes: nodes(),
    edges: edges(),
    onNodesChange: (changes) => { ... },
  }));

  return el('div').props({ className: 'graph-container' }).ref(graphRef)();
};