@appthen/react-renderer

@appthen/react-renderer

A lightweight, powerful React renderer for Low-Code schemas, designed for high performance and SSR support. Built on top of @alilc/lowcode-renderer-core but optimized for modern React applications using Ant Design.

Features

• 🚀 High Performance: Optimized rendering engine for complex low-code pages.
• ⚛️ React 18 & SSR Ready: Fully supports Server-Side Rendering (SSR) and React 18 concurrent features.
• 🎨 Ant Design Integration: Native support for Ant Design components (ConfigProvider integration).
• 📦 Lightweight: Removed heavy dependencies like @alifd/next, focusing on a modern stack.
• 🔌 Extensible: Easy to inject custom components and utilities.

Installation

npm install @appthen/react-renderer
# or
pnpm add @appthen/react-renderer
# or
yarn add @appthen/react-renderer

Usage

Basic Usage (Recommended)

Simply provide the projectId (or appId) and fileName, and the renderer will automatically fetch the schema, load dependencies, and render the page.

import { LowcodeRenderer } from '@appthen/react-renderer';

const App = () => {
  return (
    <LowcodeRenderer
      projectId="your-project-id"
      fileName="your-page-name"
      // Optional: Pass custom appHelper or override components
      appHelper={{
        utils: {
          // Custom utilities
        },
      }}
    />
  );
};

Advanced Usage (Custom Schema)

You can also pass schema and components directly if you want to manage loading manually or use static schemas.

import { LowcodeRenderer } from '@appthen/react-renderer';

const App = () => {
  const schema = {
    componentName: 'Page',
    children: [
      {
        componentName: 'Button',
        props: {
          type: 'primary',
          children: 'Click Me',
        },
      },
    ],
  };

  const components = {
    Button: ({ children, ...props }) => <button {...props}>{children}</button>,
  };

  return <LowcodeRenderer schema={schema} components={components} />;
};

Server-Side Rendering (SSR)

The renderer is designed to work seamlessly in SSR environments (e.g., Next.js, Remix, or custom Express/Vite SSR setups).

// server-entry.tsx
import { renderToString } from 'react-dom/server';
import { LowcodeRenderer } from '@appthen/react-renderer';

const html = renderToString(
  <LowcodeRenderer
    projectId="your-project-id"
    fileName="your-page-name"
    // For SSR, you might want to preload data and pass it
    // schema={preloadedSchema}
    // components={preloadedComponents}
  />,
);

Configuration

You can configure the global behavior of the renderer (e.g., API domains, authentication tokens) using setConfig.

import { setConfig } from '@appthen/react-renderer';

// Set global configuration
setConfig({
  // Override base API domain
  apiDomain: 'https://api.your-domain.com',

  // Custom token retrieval logic
  getAuthToken: () => {
    return 'your-auth-token';
  },

  // Or override specific API endpoints
  apis: {
    getProject: 'https://custom-api.com/get-project',
  },
});

APIs

LowcodeRenderer

The main component for rendering low-code schemas.

| Prop | Type | Description | | --- | --- | --- | --- | | projectId | string | The project ID to load. | | fileName | string | The specific page/component file name to render. | | schema | IPublicTypeRootSchema | (Optional) Directly pass schema, overrides auto-loading. | | components | Record<string, ComponentType> | (Optional) Custom or preloaded components. | | appHelper | object | (Optional) Helper utilities. Will be merged with the internal default appHelper. | | designMode | 'design' | 'live' | Rendering mode. |

Dependencies

• Peer Dependencies:
  • react >= 18
  • react-dom >= 18
  • antd >= 5
  • react-router-dom >= 6

License

MIT