egoist / react-to-vue

Turn a React component into a Vue component.
MIT License
70 stars 5 forks source link

Failed to resolve... #12

Open armenr opened 3 years ago

armenr commented 3 years ago

Hi there! Thanks for putting this library together! I seem to be using this incorrectly, however, so would appreciate any guidance.

For what it's worth, I'm suing Quasar v2 (vue 3) + TypeScript.

The React library I'm trying to wrap is:

https://www.npmjs.com/package/react-player

What would be the right way of trying to do the absolute simplest version of this? :)

file: /components/ReactPlayerVue.vue

<template>
</template>

<script lang="ts">
import { Vue, Options} from 'vue-class-component'
import ReactPlayer from 'react-player'

import { h } from 'vue'
import { toVue } from '@egoist/react-to-vue'

const VueReactPlayer = toVue(ReactPlayer)

// console.log('VUE REACT PLAYER ', VueReactPlayer)

@Options({ name: 'VueReact' })
export default class VueReact extends Vue {
  render() {
    return h(VueReactPlayer)
  }
}
</script>

To use this in a parent, I have done:

<template>
  <q-page class="row items-center justify-evenly">

    <vue-react url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

  </q-page>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-class-component'
import VueReact from '@components/VueReact.vue'

@Options({
  components: { VueReact }
})
export default class PageIndex extends Vue {
}
</script>
armenr commented 3 years ago

Gonna answer my own question and leave this here for anyone else who ever has the question (or to be used as another code example):

@/components/VueReact.vue

<script lang="ts">
import { Vue, Options } from 'vue-class-component'
import ReactPlayer from 'react-player'

import { h } from 'vue'
import { toVue } from '@egoist/react-to-vue'

const VueReactPlayer = toVue(ReactPlayer)

// console.log('VUE REACT PLAYER ', VueReactPlayer)

@Options({ name: 'VueReact' })
export default class VueReact extends Vue {
  render() {
    return h(VueReactPlayer)
  }
}
</script>

@/pages/Index.vue (or some other "parent" component: e.g. View/Layout/Page):

<template>
  <q-page class="row items-center justify-evenly">
    <vue-react
   url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
    />
  </q-page>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-class-component'
import VueReact from '@components/VueReact.vue'

@Options({
  components: { VueReact }
})
export default class PageIndex extends Vue {
}
</script>