Package Exports

@egoist/vue-to-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@egoist/vue-to-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-to-react

This works for both Vue 2 and Vue 3.

Install

yarn add @egoist/vue-to-react

Usage

import React from 'react'
import { render } from 'react-dom'
import toReact from '@egoist/vue-to-react'

const VueComponent = {
  data() {
    return {
      count: 0
    }
  },

  render(h) {
    return h(
      'button',
      {
        on: {
          click: () => this.count++
        }
      },
      [this.count]
    )
  }
}

const ReactComponent = toReact(VueComponent)

render(<ReactComponent />, document.getElementById('app'))

Passing Props

By default we pass all props from React to Vue:

const Counter = toReact({
  props: ['initialCount'],
  render(h) {
    return h('button', {}, [this.initialCount])
  }
})

const App = <Counter initialCount={0} />

However you can customize how the props are passed to Vue with the passProps option:

toReact(VueComponent, {
  // Only pass `initialCount` prop
  passProps: props => ({ initialCount: props.initialCount }),
  // Or disable props
  passProps: false
})

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Author

@egoist/vue-to-react © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily