renderReact() function

Creates a ref callback that renders arbitrary React content into a DOM element. The content re-renders whenever reactive dependencies in the render function change.

This is a lower-level alternative to createReactBridge for when you need more control.

Signature:

export declare function renderReact(effect: EffectFn, render: () => React.ReactNode): (container: HTMLElement) => () => void;

Parameters

Parameter	Type	Description
effect	EffectFn	The effect function from a signal service (svc.effect)
render	() => React.ReactNode	A function that returns a React element (can read signals)

Returns:

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

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

Example

import { renderReact } from '@rimitive/react';

const status = signal('loading');

const ref = renderReact(effect, () => (
  <StatusBadge variant={status() === 'error' ? 'destructive' : 'default'}>
    {status()}
  </StatusBadge>
));

el('div').ref(ref)();