Vue 3 version

[IniZio]

My current approach

import { defineComponent, h, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'

export default (Component: any) => {
  return defineComponent({
    props: {
      defaultValue: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const elRef = ref()

      onMounted(() => {
        render(React.createElement(Component, props), elRef.value)
      })

      onUpdated(() => {
        render(React.createElement(Component, props), elRef.value)
      })

      onBeforeUnmount(() => {
        unmountComponentAtNode(elRef.value)
      })

      return () => h('div', { ref: elRef })
    },
  })
}

[egoist]

done, released 2.0

[armenr]

@egoist - this is great! Would you mind maybe sharing an example where you wrap a react component in a vue component, which gets rendered by a page/layout?

[egoist]

@armenr something like this? https://github.com/egoist/react-to-vue/blob/main/demo/main.tsx

[armenr]

@egoist - Thanks so much for the quick reply! I was thinking more like this -- ANY help (and I realize, I'm being an annoying user of your package, so thank you!) --> #12