JSON Content Renderer

Create a React component that renders Remirror-style JSON documents with custom node and mark mappings, optimized configuration reuse, and graceful error handling.

Capabilities

Renders custom type and mark mappings

• Given JSON with a heading node and paragraph text containing bold and link marks, uses the supplied type and mark mappings so the heading level, text, and marks render with the mapped components; unknown marks fall back without crashing @test

Applies component props defaults

• When componentProps supplies class names for mapped paragraph and bold wrappers, the rendered output includes those props while preserving text content; missing componentProps leaves defaults intact @test

Memoizes renderer configuration

• Re-rendering with identical json, typeMap, and markMap keeps renderer configuration stable so mapped components render once; changing markMap triggers re-render only for nodes using that mark @test

Error boundaries and fallbacks

• When encountering malformed json (e.g., node without a type) or a mapped component that throws, an error boundary displays provided fallback content with error context instead of crashing, while valid json renders normally @test

Implementation

@generates

API

import type { ComponentType, ReactElement } from 'react';

export interface ArticleRendererProps {
  json: unknown;
  typeMap?: Record<string, ComponentType<any>>;
  markMap?: Record<string, ComponentType<any>>;
  componentProps?: Record<string, any>;
  errorBoundary?: ComponentType<{ error: Error; children: React.ReactNode }>;
  fallback?: ReactElement | null;
}

/**
 * Render rich text content described as Remirror-compatible JSON using package-provided renderer utilities.
 */
export function ArticleRenderer(props: ArticleRendererProps): ReactElement;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides JSON-to-React rendering utilities, configurable type/mark mapping, and performance helpers.