Integrating with a React Application

Integrating the Visiontree Auto Renderer with a React application is straightforward and involves creating a React wrapper component to manage the Vue instance's lifecycle and DOM interactions. This document will guide you through the process of integrating the Visiontree Auto Renderer in a React application.

Overview

Installing Dependencies
Creating the React Wrapper Component
Using the Wrapper Component in Your Application

1. Installing Dependencies

To begin, ensure you have the Visiontree Auto Renderer package installed in your React project:

bash

npm install @visiontree/mfx-auto-renderer

2. Creating the React Wrapper Component

Next, create a React wrapper component that manages the Visiontree Auto Renderer Vue instance's lifecycle and DOM interactions. This wrapper component will create the Vue instance, mount it to the DOM, and handle unmounting when the component is no longer needed.

tsx

import React, { useEffect} from 'react'
import {createMfxApp} from '@visiontree/mfx-auto-renderer'
import './mfx-wrapper.css'
import '@visiontree/mfx-auto-renderer/style.css'

const MFXAutoRendererWrapper = (props) => {

      useEffect(() => {
        const configJson = JSON.parse(props.config)
        const mfxApp =  createMfxApp(configJson)
        mfxApp.mount('.mfx-form')

      },[props.config])
    
      return (
        <div className="host-app">
          <div className="host-app-header">
            -- Header
          </div>
          <div className="mfx-form" />
          <div className="host-app-footer">
            -- Footer
          </div>
        </div>
      )

}

export default MFXAutoRendererWrapper

This wrapper component takes a config prop, which should be the configuration object for the Visiontree Auto Renderer instance.

3. Using the Wrapper Component in Your Application

With the wrapper component created, you can now use it in your React application. Simply import the component and include it in your component hierarchy, passing the configuration object as a prop.

tsx

import React from 'react'
import MFXAutoRendererWrapper from './mfx-auto-renderer/mfx-wrapper'
import q1 from './test/questionnaire/basic_data_set_eng_ger_modified.json'
import "./App.css"


function App() {

  const questionnaires = [];

  questionnaires.push(q1);
  const autoRendererConfig = {
    // Your MFX Auto Renderer Config
  }
  const configString = JSON.stringify(autoRendererConfig);

  return (
    <div>
      <h1>Visiontree Auto Renderer Integration Example</h1>
      <div className='a-mfx-wrapper'>
        <MFXAutoRendererWrapper config={configString} />
      </div>
    </div>
  )

}

export default App;

TIP

The current version requires the following CSS to be included in your project.

css

[theme-mode='dark'] .mfx-form {
  color: var(--bl-dk-text-color);
  background-color: var(--bl-dk-background-color);
}

[theme-mode='light'] .mfx-form {
  color: var(--bl-text-color);
  background-color: var(--bl-background-color);
}

Now, the Visiontree Auto Renderer will be seamlessly integrated into your React application.

Conclusion

Integrating the Visiontree Auto Renderer with a React application is simple and efficient, allowing you to leverage the power and flexibility of the Visiontree framework in your React-based projects. By creating a wrapper component to manage the Vue instance's lifecycle and DOM interactions, you can quickly and easily incorporate the Visiontree Auto Renderer into your application.

Additional Code Example

tsx

import { Core, createMfxApp } from '@visiontree/mfx-auto-renderer'
import React, { useEffect } from 'react'
import questionnaire from './basic_data_set_eng_ger.json'
import './App.css'
import '@visiontree/mfx-auto-renderer/style.css'

function App() {

  Core.loadConfig({
    layout: 'clinical'
    forms: {
      sources: [questionnaire],
    },
    plugins: [
      {
        id: 'react-plugin',
        async init(payload) {
          console.log('react-plugin init', payload)

          // Add your own form
          //
          // payload.forms.push(questionnaire)

          // Add your own response
          //
          // payload.responses.push(questionnaireResponse)
        },
        async setup(form) {
          console.log('react-plugin setup', form)

          // Access a form before it is rendered.
          //
          // form.items
          // form.itemMap
        },
        async save(questionnaireResponse) {
          console.log('react-plugin save', questionnaireResponse)

          // Intercept the save event from the Core engine
        }
      }
    ]
  })

  useEffect(() => {
    createMfxApp().mount('.mfx-form')
  })

  return (
    <div className="host-app">
      <div className="host-app-header">
        -- Header
      </div>
      <div className="mfx-form" />
      <div className="host-app-footer">
        -- Footer
      </div>
    </div>
  )
}

export default App

Integrating with a React Application ​

Overview ​

1. Installing Dependencies ​

2. Creating the React Wrapper Component ​

3. Using the Wrapper Component in Your Application ​

Conclusion ​

Additional Code Example ​