@opncanvas/react-renderer

React components for rendering design schemas. Display-only components without editing functionality.

Installation

npm install @opncanvas/react-renderer @opncanvas/schema react react-dom

Usage

import { RenderedButton, RenderedText, RenderedInput } from '@opncanvas/react-renderer'
import { FormButton } from '@opncanvas/schema'

function App() {
  const buttonNode: FormButton = {
    id: 'btn_1',
    type: 'button',
    action: 'submit',
    label: 'Click Me',
    color: '#000',
    font_color: '#fff'
  }

  return (
    <RenderedButton
      node={buttonNode}
      onBlockClick={(node) => console.log('Clicked:', node.id)}
    />
  )
}

Components

RenderedButton

Renders a button node.

<RenderedButton
  node={buttonNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
  onAction={(node) => console.log('Double clicked')}
/>

RenderedText

Renders text nodes (header, subtext, legal).

<RenderedText
  node={textNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
/>

RenderedInput

Renders input nodes (email, phone).

<RenderedInput
  node={inputNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
/>

RenderedImage

Renders image nodes.

<RenderedImage
  node={imageNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
/>

RenderedBackground

Renders a background container.

<RenderedBackground
  node={backgroundNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
>
  {/* Child elements */}
</RenderedBackground>

Props

All components accept these common props:

• node - The node data from your schema
• isSelected (optional) - Whether the element is selected
• onBlockClick (optional) - Callback when element is clicked
• onAction (optional) - Callback when element is double-clicked (buttons only)

Styling

Components use inline styles based on node properties. You can add CSS classes for additional styling:

.rendered-btn {
  /* Base button styles */
}

.selected {
  outline: 2px solid blue;
}

.form-container {
  /* Container styles */
}

License

Apache 2.0