@epicuri/entity-renderer

A React component library for rendering dynamic entity templates with support for custom HTML and CSS.

Installation

npm install @epicuri/entity-renderer

Usage

The package exports two main components:

1. EntityRenderer: Renders an entity using a template and data
2. DynamicRenderer: Low-level component for rendering HTML templates with dynamic data

EntityRenderer Example

import { EntityRenderer } from '@epicuri/entity-renderer';

function MyComponent() {
  const entity = {
    id: '123',
    descriptor: 'recipe',
    data: {
      llm: {
        name: 'Spaghetti Carbonara',
        description: 'Classic Italian pasta dish',
        imageurl: 'https://example.com/carbonara.jpg'
      },
      app: {
        likes: 42
      }
    },
    render: {
      card: `<div class="recipe-card">
        <h3>{name}</h3>
        <p>{description}</p>
        <img src="{imageurl}" alt="{name}" />
        <div class="likes">{likes} likes</div>
      </div>`
    }
  };

  return (
    <EntityRenderer
      entity={entity}
      view="card"
      onError={(error) => console.error(error)}
    />
  );
}

DynamicRenderer Example

import { DynamicRenderer } from '@epicuri/entity-renderer';

function MyComponent() {
  const template = `<div class="user-card">
    <h3>{name}</h3>
    <p>{bio}</p>
  </div>`;

  const data = {
    name: 'John Doe',
    bio: 'Software Engineer'
  };

  return (
    <DynamicRenderer
      htmlTemplate={template}
      data={data}
      styles={{
        container: {
          width: '100%',
          maxWidth: '300px'
        }
      }}
    />
  );
}

Features

• Safe HTML rendering with DOMPurify sanitization
• Support for dynamic data interpolation
• Custom styling through inline styles
• Error handling and fallback UI
• TypeScript support

API Reference

EntityRenderer Props

interface EntityRendererProps {
  entity: EntityWithRender;
  view: 'card' | 'detail' | 'row' | 'list' | 'form';
  onError?: (error: Error) => void;
}

DynamicRenderer Props

interface DynamicRendererProps {
  htmlTemplate: string;
  data: Record<string, any>;
  styles?: {
    container?: React.CSSProperties;
    wrapper?: React.CSSProperties;
  };
}

License

MIT