@wasl-flow/react

React renderer for wasl-flow. It renders content models into React elements.

Install

npm install wasl-flow @wasl-flow/react
# or
pnpm add wasl-flow @wasl-flow/react

Quick Start

import { ReactRenderer } from '@wasl-flow/react';

type ButtonModel = { type: 'button'; text: string; variant?: string };

const renderer = new ReactRenderer({ showValidationErrors: true });

renderer.register({
  type: 'button',
  parse: model => ({ data: model as ButtonModel }),
  factory: ({ model }) => (
    <button className={`btn-${model.variant ?? 'primary'}`}>{model.text}</button>
  ),
});

export function App() {
  return <div>{renderer.render({ type: 'button', text: 'Click me' })}</div>;
}

Renderer Behavior

• render returns a React.ReactNode.
• renderArray aggregates multiple outputs into a React Fragment and filters null and undefined.
• Default nullValue is null for React compatibility.
• When showValidationErrors is enabled, errors are rendered as a styled React element with sanitized details.

Configuration

All RendererConfiguration options from the core package are supported. This renderer only changes the default nullValue to null.

For details on registration, parsing, and safety limits, see the core package README.